我正在处理图像，我遇到了纵横比问题。
<img src="big_image.jpg" width="900" height="600" alt="" />
如您所见，高度和宽度已经指定。我为图像添加了CSS规则：
img {
max-width: 500px;
}
但对于big_image.jpg，我得到的宽度=500，高度=600。如何设置图像的大小，同时保持其纵横比。
当前回答
可以使用纵横比属性css
.my-image {
aspect-ratio: 1/1; // square
aspect-ratio: 16/9; // wide screen 1080p
aspect-ratio: 4/3;
aspect-ratio: 2/3;
}
其他回答
国际货币基金组织{显示：块；最大宽度：230px；最大高度：95px；宽度：自动；高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><img width=“400”height=“400”src=“http://i.stack.imgur.com/aEEkn.png">
如果图像对于指定区域太大，这将使图像收缩（作为缺点，它不会放大图像）。
backgroundsize属性仅为ie>=9，但如果这对您来说很好，您可以使用带有背景图像的div并设置backgroundsize：contain：
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
现在，您只需将div大小设置为所需的大小，图像不仅保持其纵横比，还将在div中垂直和水平集中。不要忘记在css上设置大小，因为div本身没有width/height属性。
这种方法与setecs答案不同，使用这种方法，图像区域将是恒定的，并由您定义（根据div大小和图像纵横比，水平或垂直地留出空格），而setecs回答将为您提供一个与缩放图像大小完全相同的框（没有空格）。
编辑：根据MDN背景大小文档，您可以使用专有过滤器声明模拟IE8中的背景大小属性：
虽然Internet Explorer 8不支持背景大小属性，但可以使用非标准的-ms过滤器函数模拟其某些功能：
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
国际货币基金组织{最大宽度：80px；/*也适用于百分比值，如100%*/高度：自动；}<p>此图像最初为400x400像素，但应通过CSS调整大小：</p><img width=“400”height=“400”src=“https://i.stack.imgur.com/aEEkn.png"><p>假设HTML的作者故意想要高度为宽度值的一半，此CSS将忽略HTML作者的愿望，这可能是您想要的，也可能不是您想要的：</p><img width=“400”height=“200”src=“https://i.stack.imgur.com/aEEkn.png">
使用伪元素进行垂直对齐怎么样？这更少的代码用于旋转木马，但我想它适用于每个固定大小的容器。它将保持纵横比，并在顶部/底部或左侧/写入最短尺寸时插入@灰色暗条。同时，图像通过文本对齐水平居中，通过伪元素垂直居中。
> li {
float: left;
overflow: hidden;
background-color: @gray-dark;
text-align: center;
> a img,
> img {
display: inline-block;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
margin: auto;
text-align: center;
}
// Add pseudo element for vertical alignment of inline (img)
&:before {
content: "";
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
如果应用程序可以具有任何纵横比或分辨率的图像，则可以像此链接中那样管理高度和宽度。
这使用Javascript和HTML
https://stackoverflow.com/a/65090175/13338731
