javascript - 我怎样才能获得与 Medium.com 的功能标题相似的图像？ (裁剪图像)

Question

任何人都可以了解一下 medium.com 的标题图像裁剪功能如何吗？

我试过在线查找 - 但我还没有真正找到任何东西。它是同类中唯一的响应式图像大小调整解决方案(我个人遇到过)。

我会对任何想法非常感兴趣 - 如果它有任何帮助 - 他们使用的系统对肖像图像非常非常糟糕 - 它显然只适用于风景。

功能 header 示例

---

缩放对比图

比较顶部和底部图像(两者完全相同)- 请注意顶部图像的顶部和底部裁剪了 10%~ 但宽度保持不变。

静态 10%~ 适用于此图像 - 但对于另一幅图像，它会产生截然不同的效果，让我认为宽度/高度/纵横比与裁剪百分比有关。

---

显示缩放过程的短视频

Tehan + Lax

---

CSS

目前这是我正在使用的代码(只是想测试百分比)。图片位于名为 image 的 div 内，它使用隐藏的溢出，并且图片使用填充顶部/底部来“裁剪”它。

.image {  
    height: auto;
    width: 100%;
    overflow:hidden;   
}

.image img {
    height: auto;
    width: 100%;
    margin-bottom: -11%;  
    margin-top: -8%;
}

Answer 1

你可以检查这些 tuts 并使用 skrollr.js

基本上使用css和javascript来控制图像和行为

http://bassta.bg/2013/12/medium-com-like-blurred-header-effect/

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/