固定图像的宽度和高度，但高度被削减

Question

我只注意到在vk.com在你的相册中的图片有固定的宽度，但高度也是固定的，但图像切割成像middle.And如果我复制路径的图像和查看只有他们没有被削减。

我有这样的照片更容易理解

如何做到这一点？

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设置为overflow: hidden。这会剪裁比容器大的任何子对象。裁剪仅在显示时间，图像本身保持不变。

你可以看到包含分区，您可以切换隐藏的，可见在这个演示的溢出设置图像的例子：http://jsfiddle.net/jfriend00/npzjn/。