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