javascript - 保持可缩放图像的纵横比

Question

我正在使用 css 属性 transform: translateY 将图像在页面上垂直居中。图像的宽度是页面宽度的百分比，以便在用户放大或缩小浏览器窗口时进行缩放。

这是标记:

<div class="item">
    <img src="..." width="50%">
</div>

这是CSS:

.item {
    width: 100%;
    height: 100%;
    text-align: center;
}
div.item > img {
    max-height: 100%;
    max-width: 100%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这非常有效，除非浏览器窗口比宽度短得多，在这种情况下图像的高度会被 trim ，或者通过将图像的最大高度设置为 100%，会被压缩。在查看此演示时，您可以通过大幅降低浏览器窗口的高度来发现问题:https://jsfiddle.net/0zh4qvLm/ .在这种情况下如何保持图像的纵横比？

Answer 1

将您的 CSS 更改为

div.item > img {
    max-height: 100%;
    max-width: 50%;
    width:auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

并删除 width来自您的 <img> 的属性

updated fiddle