任何人都可以锻炼 medium.com 的功能标题图像裁剪方式吗？
我已经尝试在网上查找 - 但我还没有真正找到任何东西。它是同类中唯一的响应式图像大小调整解决方案（我个人遇到过）。
我会对任何想法都非常感兴趣 - 如果有任何帮助 - 他们使用的系统对于肖像图像非常非常糟糕 - 它显然只是为风景而构建的。
功能标题示例
缩放比较镜头
比较顶部和底部图像（两者完全相同） - 请注意顶部图像在顶部和底部有 10%~ 的裁剪 - 但宽度保持不变。
静态的 10%~ 对这张图片来说还可以——但在另一张图片中，它会产生截然不同的效果，这让我认为宽度/高度/纵横比与裁剪百分比有关。
展示缩放过程的短视频
CSS
目前这是我正在使用的代码（只是想测试百分比）。该图像位于名为 image 的 div 内部，该 div 使用了溢出隐藏，并且该图像使用填充顶部/底部来“裁剪”它。
.image {
height: auto;
width: 100%;
overflow:hidden;
}
.image img {
height: auto;
width: 100%;
margin-bottom: -11%;
margin-top: -8%;
}