提问者:小点点

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


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

我的确切代码是:

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

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

匿名用户

这是样品

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>

相关问题