html - 重新调整不同图像的大小而不失真

Question

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

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

Answer 2

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