固定图像的宽度和高度，但要切割的高度

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/。