如何在Medium.com的功能标题中获得类似的图像？(裁剪图像)

Question

任何人都可以锻炼medium.com如何进行其功能标题图像裁剪？

我试过在线看 - 但我还没找到任何东西.这是该类型的唯一响应式图像大小调整解决方案(我个人遇到过).

我对任何想法都很感兴趣 - 如果有任何帮助 - 他们使用的系统对于肖像图像来说非常非常糟糕 - 它显然只是为景观而建.

功能标题示例

---

缩放比较镜头

比较顶部和底部图像(两者完全相同) - 注意顶部图像在顶部和底部有10%〜裁剪 - 但宽度保持不变.

一个静态的10%〜对于这个图像可以正常工作 - 但是对于另一个,它会产生一些非常不同的东西,让我觉得宽度/高度/纵横比与裁剪百分比有关.

---

短视频显示正在进行的缩放过程

Tehan + Lax

---

CSS

目前这是我正在使用的代码(只是想测试百分比).图像位于名为image的div内,使用隐藏的溢出,图像使用padding top/bottom来"裁剪"它.

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

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

Answer 1

你可以检查这些图并使用 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/