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