如何在标准化 div 中显示不同尺寸的图像

Question

我有许多不同尺寸的图像。有些比宽度高，反之亦然。每个图像都在一个响应式 div 中，设置为视口的大小（因此所有 div 的大小相同）。我希望任何给定的图像都显示在其 div 中而无需裁剪。肖像图像将在视口的高度达到最大值。横向图像将在视口的宽度处最大化。 div 中任何剩余的宽度或高度都将是空的，并且图像不会失真。这可能吗？

Answer 1

你想要这样的东西吗？

#frame {
    width:300px;
    height:300px;
    overflow:hidden;
    margin:30px;

}

#img {
    margin:30px;
}

<div id="frame">
    <img src="http://pds15.egloos.com/pds/200906/18/49/f0063949_4a3910adbcd4b.jpg" alt="arctic fox" />
</div>


<img id="img" src="http://pds15.egloos.com/pds/200906/18/49/f0063949_4a3910adbcd4b.jpg" alt="arctic fox" />

如果上面是您想要的，overflow 属性就是您可能正在寻找的。

你可以在div上设置一个overflow : hiddencss属性，那么无论你的图片有多大或多小，只要在里面就不会溢出盒子。