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

这非常有效，除非浏览器窗口比宽度短得多，在这种情况下，图像的高度被修剪，或者通过将图像的最大高度设置为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

Answer 2

在width: auto下添加max-width。 JS Fiddle

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

维护可伸缩图像的宽高比

2 个答案: