固定图像的宽度和高度，但需要裁剪高度。

Question

我刚刚注意到vk.com上相册中的图片具有固定的宽度，但高度也是固定的，但图片被像中间一样裁剪。如果我复制图像路径并查看它们，它们不会被裁剪。

我制作了这张照片以更容易理解

这是如何做到的？

- Ben

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; }

Demo: jsfiddle.net/tbedf

- Marcel

Answer 2

可以将图片放在固定高度的容器div中，然后将容器div设置为overflow: hidden。这样会裁剪任何大于容器的子对象，裁剪仅在显示时发生，图像本身保持不变。

您可以在此演示中查看包含图像的div示例，在此示例中，您可以在隐藏和可见之间切换溢出设置：http://jsfiddle.net/jfriend00/npzjn/。

- jfriend00

---

好的，但如果有30张图片，那么每4张图片必须放在不同的div中吗？ - Ben

@MarianPetrov - 是的，这里有问题吗？在显示中每行都是自己的div并不罕见。 - jfriend00

这很新，谢谢 :) 但是如果图片高度不同，如何将所有图像对齐到div的顶部？ - Ben

@MarianPetrov - 我在我的回答末尾添加了顶部对齐和溢出设置的演示。 - jfriend00