宽度超过高度时保持图像宽高比

Question

我尝试在width > height或height > width时保持正确的图像宽高比。当宽度超过高度时，这样做会出现问题，图像将溢出到父容器中。我不希望这种情况发生，而是重新调整图像大小以保持正确的宽高比。

此示例的图像为640 x 480，比例为4：3

如果我拖动容器宽度小于高度，则需要均匀填充顶部/底部，而不会出现图像溢出。如果我将容器拖动到比高度更宽的位置，那么我什至需要左右左右填充，而不会出现图像溢出。

.main {
    height: 100%;
    width: 100%;
}
.wrapper {
    position: relative;
    padding-bottom: 75%;
}
.wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="main">
    <div class="wrapper">
        <img src="https://placeimg.com/640/480/animals" />
    </div>
</div>

JSFiddle

Answer 1

对于现代浏览器，您应该只设置宽度。浏览器将执行其他所有操作。

示例：

.main {
    height: auto;
    width: auto;
}
.wrapper {
    position: relative;
    padding-bottom: 75%;
}
.wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

Answer 2

您可以设置height:auto和width:100%来使图像具有响应性

.my-img {
  width: 100%;
  height: auto;
}

<img src="https://placeimg.com/640/480/animals" alt="Nature" class="my-img" >