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

Ben*_*Ben 3 javascript css image vk

我刚刚在vk.com中注意到你的相册中的图像有固定的宽度,但高度也是固定的,但图像像中间一样被剪切.如果我将路径复制到图像并仅查看它们,则不会剪切它们.

我让这张照片更容易理解

在此输入图像描述

怎么做的?

Mar*_*cel 6

它们的容器具有固定的高度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>?
Run Code Online (Sandbox Code Playgroud)

CSS:

li { float:left; height:100px; overflow:hidden; margin:10px; }
Run Code Online (Sandbox Code Playgroud)

演示:jsfiddle.net/tbedf