固定圖像的寬度和高度，但高度被削減

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