Question

我有一个img，我用CSS动态调整大小，但我对宽高比做出了假设：

{{1}}

问题是纵横比因载入不同患者而异。

如何在不对宽高比做出假设的情况下实现相同的结果？

Answer 1

我必须在这里做一些假设，因为您只包含了一小段CSS并且没有标记。

不是调整图像大小，而是将其放在容器中，并将其设置为填充可用空间或为其指定大小。然后让图像像这样在里面自由漫游：

＆＃13;

.image .imageWrapper {
    position: absolute;
    right: 20px;
    left: 20px;
    top: 20px;
    bottom: 20px;
}
.image .imageWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

＆＃13;

<div class="image">
    <div class="imageWrapper">
        <img src="http://cdn.teckler.com/images/Revanth/fd64d1530a2af6b98875117222d111d3.jpg" />
    </div>
</div>

＆＃13;

然后宽高比成为一个没有实际意义的点，因为一旦图像到达其父级的边缘，它将开始缩放。

具有未知宽高比的动态元素缩放

1 个答案: