我正在使用HTML的img标记来显示我们应用程序中的一张照片。我已经将它的高度和宽度属性都设置为64。我需要显示任何图像分辨率(例如256x256、1024x768、500x400、205x246等)为64x64。但是通过将img标记的高度和宽度属性设置为64,它不能保持纵横比,所以图像看起来失真了。
我的确切代码是:
<img src="Runtime Path to photo" border="1" height="64" width="64">
不要设置高度和宽度。使用一个或另一个,正确的纵横比将保持。
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>