调整不同图像的大小而不失真

Question

所有这些图片都有一个共同点;它们的宽度都是300或600像素。但高度从大约300-900像素不等。现在我需要一小组用于向用户推荐其他图片的图片。这些图片只会是大约100x200像素（可能会改变）。我的先前尝试使图片缩小到100x200的纵横比例。我需要它们重叠，但多余部分被隐藏。

- Harry

---

如果想要隐藏过度的部分，请应用CSS规则：overflow: hidden; - lukas.pukenis

Answer 1

尝试像这样 http://dabblet.com/gist/2769112

你需要的CSS很简单，如下所示：

.img-container {
    width: 200px; /* whatever set width */
    height: 100px;
    display: inline-block; /* or you could float them */
    overflow: hidden;
}
.img-container img {
    width: 100%;
}

- Ana

Answer 2

将图像放置在包装元素中，例如一个具有定义的高度和宽度的DIV，并使用overflow:hidden。

- Diodeus - James MacFarlane

---

我无法定义高度，因为每个图像都不同？或者你的意思是当我输出它们时，获取高度然后设置它？ - Harry

你正在定义WRAPPER的大小，而不是图像的大小。我建议你在IMG标签中设置一个公共高度，并允许它们在容器宽度超过容器时溢出容器。 - Diodeus - James MacFarlane