我正在使用 HTML 的 img 标签在我们的应用程序中显示照片。我已将其高度和宽度属性设置为 64。我需要将任何图像分辨率（例如 256x256、1024x768、500x400、205x246 等）显示为 64x64。但是通过将img标签的height和width属性设置为64，它并没有保持纵横比，所以图像看起来失真了。
供您参考，我的确切代码是：
<img src="Runtime Path to photo" border="1" height="64" width="64">
【问题讨论】：
有一个新的 CSS 属性 aspect-ratio。它为盒子设置了一个首选的纵横比，它将用于计算自动尺寸和其他一些布局功能。
img {
width: 100%;
aspect-ratio: 16/9;
}
所有流行的浏览器都支持它。
MDN 链接：https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://web.dev/aspect-ratio/ 包含使用该属性的好例子
【讨论】：
我的网站显示了许多照片（具有各种宽高比），单击其中一张以模式打开它。为了让它适合模态而不裁剪、滚动或扭曲，我在我的 img 标签上使用了以下类
.img {
max-height: 100%;
max-width: 100%;
object-fit: scale-down;
}
【讨论】：
在他发布的大多数情况下，张贴者显示的尺寸受高度限制 >>>（256x256、1024x768、500x400、205x246 等）但适合 64 像素的最大高度像素尺寸，这是大多数风景“照片”的典型特征。所以我的猜测是他想要一个高度始终为 64 像素的图像。为此，请执行以下操作：
<img id="photo1" style="height:64px;width:auto;" src="photo.jpg" height="64" />
此解决方案可确保图像的高度全部为最大 64 像素，并允许根据每个图像的纵横比扩展或缩小宽度。在 img height 属性中将高度设置为 64 会在图像下载时在浏览器的 Rendertree 布局中保留一个空间，因此内容不会转移等待图像下载。此外，新的 HTML5 标准并不总是支持宽度和高度属性。它们只是尺寸“提示”，而不是图像的最终尺寸。如果您在样式表中重置或更改图像的高度和宽度，则图像属性中的实际值将重置为您的 CSS 值或图像的原生默认尺寸。将 CSS height 设置为“64px”，将width 设置为“auto”，强制宽度以原生图像宽度（不是图像属性宽度）开始，然后使用 CSS 样式计算新的宽高比作为高度。这让你有了一个新的宽度。所以height和width "img" 属性在这里真的不需要，只是强制浏览器做额外的计算。
【讨论】：
使用 css：
.img {
display:table-cell;
max-width:...px;
max-height:...px;
width:100%;
}
【讨论】：
在html元素img的css中使用object-fit: contain。
例如：
img {
...
object-fit: contain
...
}
【讨论】：
试试这个：
<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">
添加 object-fit="cover" 将强制图像占用空间而不会丢失纵横比。
【讨论】：
<img src="Runtime Path to photo"
style="border: 1px solid #000; max-width:64px; max-height:64px;">
【讨论】：
width 和height 设置为auto。
不要设置高度和宽度。使用其中一种，将保持正确的纵横比。
.widthSet {
max-width: 64px;
}
.heightSet {
max-height: 64px;
}<img src="http://placehold.it/200x250" />
<img src="http://placehold.it/200x250" width="64" />
<img src="http://placehold.it/200x250" height="64" />
<img src="http://placehold.it/200x250" class="widthSet" />
<img src="http://placehold.it/200x250" class="heightSet" />【讨论】：
这是一个示例
div{
width: 200px;
height:200px;
border:solid
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}<div>
<img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>【讨论】：
列出的所有方法都没有将图像缩放到适合盒子的最大尺寸，同时保持所需的纵横比。
使用 IMG 标记无法做到这一点（至少在没有一点 JavaScript 的情况下不能做到），但可以通过以下方式完成：
<div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
【讨论】：
style="background: url('_'); background-size: cover width:_px height:_px" 作为<img> 标签。
cover 而不是contain 才能将图像尺寸最大化。 contain 导致“信箱”。
将图片的width和height设置为auto，但同时限制max-width和max-height：
img {
max-width:64px;
max-height:64px;
width:auto;
height:auto;
}
如果您想在 64x64 像素的“帧”中显示任意大小的图像，您可以使用内联块包装器并为其定位，例如 in this fiddle。
【讨论】：
将图像包装在尺寸为 64x64 的div 中，并将width: inherit 设置为图像：
<div style="width: 64px; height: 64px;">
<img src="Runtime path" style="width: inherit" />
</div>
【讨论】：
为什么不使用单独的 CSS 文件来保持要显示的图像的高度和宽度？这样，您就可以提供必要的宽度和高度。
例如：
image {
width: 64px;
height: 64px;
}
【讨论】：