javascript - 固定图像宽度和高度但要剪切的高度

Question

我刚刚在 vk.com 中注意到，您相册中的图像具有固定的宽度，但高度也是固定的，但图像会像中间一样被剪切。如果我复制图像的路径并仅查看它们，它们不会被剪切。

我让这张照片更容易理解

这是怎么做的？

Answer 1

他们的容器有一个固定的高度和overflow:hidden集合。

HTML：

<ul>
<li><img src="//lorempixel.com/100/100/"></li>
<li><img src="//lorempixel.com/100/200/"></li>
<li><img src="//lorempixel.com/100/300/"></li>
<li><img src="//lorempixel.com/100/400/"></li>
</ul>​

CSS：

li { float:left; height:100px; overflow:hidden; margin:10px; }

演示：jsfiddle.net/tbedf

Answer 2

可以将图像放入具有固定高度的容器 div 中，然后将容器 div 设置为overflow: hidden. 这将剪裁任何大于容器的子对象。剪辑仅在显示时进行，图像本身保持不变。

您可以看到包含 div 的图像示例，您可以在此演示中在隐藏和可见之间切换溢出设置：http: //jsfiddle.net/jfriend00/npzjn/。