保持可缩放图像的纵横比

Maintaining the aspect ratio of a scalable image

本文关键字：图像 缩放      更新时间：2023-09-26

我使用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/.在这种情况下，我如何保持图像的纵横比？

将CSS更改为

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

并从<img> 中删除width属性

更新的fiddle

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

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