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

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