我使用HTML的img标记在我们的应用程序中显示照片。我已经将其高度和宽度属性都设置为64。我需要显示任何图像分辨率(例如256x256、1024x768、500x400、205x246等)为64x64。但是,通过将img标记的高度和宽度属性设置为64,它不会保持纵横比,因此图像看起来失真。
供您参考,我的确切代码是:
<img src="Runtime Path to photo" border="1" height="64" width="64">
发布于 2012-10-16 18:06:27
不要设置高度和宽度。使用一种或另一种,将保持正确的纵横比。
.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" />
发布于 2015-02-22 19:17:13
这是一个示例
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>
发布于 2013-07-29 09:08:58
将图像的width
和height
设置为auto
,但同时限制max-width
和max-height
img {
max-width:64px;
max-height:64px;
width:auto;
height:auto;
}
如果你想在64x64px的“帧”中显示任意大小的图像,你可以使用内联块包装器并对它们进行定位,比如in this fiddle。
https://stackoverflow.com/questions/12912048
复制相似问题