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

Question

我正在使用HTML的img标签在我们的应用程序中显示照片.我已将其height和width属性设置为64.我需要将任何图像分辨率(例如256x256,1024x768,500x400,205x246等)显示为64x64.但是通过将img标签的高度和宽度属性设置为64,它不会保持纵横比,因此图像看起来很扭曲.

供您参考我的确切代码是:

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

Answer 1

不要设置高度和宽度.使用其中一个,将保持正确的宽高比.

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

Answer 2

这是样本之一

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 3

设置width和height图像auto,但限制max-width和max-height:

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

小提琴

如果要在64x64px"frames"中显示任意大小的图像,可以使用内联块包装器和定位它们,就像在这个小提琴中一样.

Answer 4

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

Answer 5

有一个新的 CSS 属性aspect-ratio。它为框设置首选纵横比，该纵横比将用于计算自动尺寸和其他一些布局功能。

img {
  width: 100%;
  aspect-ratio: 16/9;
}

所有流行的浏览器都支持它。
MDN 链接：https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
并且https://web.dev/aspect-ratio/包含使用此属性的好示例

Answer 6

object-fit: contain在 html 元素的 css 中使用img。

前任：

img {
    ...
    object-fit: contain
    ...
}

Answer 7

列出的方法都没有将图像缩放到适合框的最大可能尺寸,同时保持所需的宽高比.

这不能用IMG标签完成(至少没有一点JavaScript),但可以按如下方式完成:

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

Answer 8

将图像包裹在div尺寸为 64x64 的 a 中并设置width: inherit为图像：

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