我正在使用 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/ .在这种情况下如何保持图像的纵横比?
最佳答案
将您的 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>
的属性
关于javascript - 保持可缩放图像的纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29176296/