如何使用HTML IMG标记维护纵横比

Question

我正在使用HTML的img标记来显示我们应用程序中的一张照片。我已经将它的高度和宽度属性都设置为64。我需要显示任何图像分辨率（例如256x256、1024x768、500x400、205x246等）为64x64。但是通过将img标记的高度和宽度属性设置为64，它不能保持纵横比，所以图像看起来失真了。

我的确切代码是：

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

Answer 1

这是样品

null

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>

Answer 2

不要设置高度和宽度。使用一个或另一个，正确的纵横比将保持。

null

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