如何使用HTML IMG标签保持宽高比

我正在使用HTML的img标签在我们的应用程序中显示照片。我已经将其height和width属性都设置为64。我需要将任何图像分辨率（例如256x256、1024x768、500x400、205x246等）显示为64x64。但是通过将img标签的height和width属性设置为64，就不会保持纵横比，因此图像看起来会失真。

供您参考，我的确切代码是：

<img src="Runtime Path to photo" border="1" height="64" width="64">

不要设置高度和宽度。使用其中之一，将保持正确的纵横比。

.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>

将width和height的图像设置为auto，但同时限制max-width和max-height：

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

小提琴

如果要在64x64px“帧”中显示任意大小的图像，则可以使用内联块包装器并对其进行定位，如本小提琴所示。

<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

列出的所有方法均未将图像缩放到适合框的最大尺寸，同时又保留了所需的宽高比。

这不能通过IMG标签来完成（至少不是没有JavaScript的话），但是可以按以下步骤完成：

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

object-fit: contain在html的CSS中使用属性img。

将图片包装为div尺寸为64x64 的图片，并将其设置width: inherit为：

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

为什么不使用单独的CSS文件来保持要显示图像的高度和宽度？这样，您可以一定提供宽度和高度。

例如：

       image {
       width: 64px;
       height: 64px;
       }

试试这个：

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

添加object-fit =“ cover”将强制图像占用空间而不会丢失宽高比。