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

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

.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

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

Answer 4

将图片的width和height设置为auto，但同时限制max-width和max-height：

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

Fiddle

如果要在64x64px“frames”中显示任意大小的图像，可以使用内联块包装和定位，如in this fiddle。

Answer 5

列出的所有方法都没有将图像缩放到适合框的最大尺寸，同时保留所需的宽高比。

使用IMG标签无法做到这一点（至少没有一点JavaScript），但可以按照以下方式完成：

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

Answer 6

在HTML object-fit: contain的CSS中使用img属性。

Answer 7

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

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

Answer 8

我的网站显示了许多照片（具有多种纵横比），单击其中一张会以模式打开它。为了让它在不裁剪、滚动或失真的情况下适应模态，我在 img 标签上使用了以下类

.img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

Answer 9

为什么不使用单独的CSS文件来维护要显示的图像的高度和宽度？这样，您就可以提供宽度和高度。

例如：

       image {
       width: 64px;
       height: 64px;
       }

Answer 10

尝试一下：

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

添加object-fit =“ cover”将迫使图像占用空间而不会失去长宽比。

Answer 11

使用CSS：

.img {
    display:table-cell;
    max-width:...px;
    max-height:...px;
    width:100%;
}

Answer 12

在他发布的大多数情况下，海报显示的尺寸受高度限制 >>>（256x256、1024x768、500x400、205x246 等）但适合 64 像素的最大高度像素尺寸，这是大多数风景“照片”的典型特征。所以我的猜测是他想要一个高度始终为 64 像素的图像。为此，请执行以下操作：

<img id="photo1" style="height:64px;width:auto;" src="photo.jpg" height="64" />

此解决方案保证图像的高度最大为 64 像素，并允许根据每个图像的纵横比扩展或缩小宽度。在 img height 属性中将 height 设置为 64 会在浏览器的 Rendertree 布局中保留一个空间作为图像下载，因此内容不会移动等待图像下载。此外，新的 HTML5 标准并不总是支持宽度和高度属性。它们只是尺寸“提示”，而不是图像的最终尺寸。如果您在样式表中重置或更改图像高度和宽度，图像属性中的实际值将重置为您的 CSS 值或图像本机默认尺寸。将 CSS height 设置为“64px”并将 width 设置为“auto”强制宽度以原生图像宽度（不是图像属性宽度）开始，然后使用 CSS 样式计算新的纵横比为高度。这会给你一个新的宽度。所以这里真的不需要高度和宽度“img”属性，只是强制浏览器做额外的计算。

Answer 13

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

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

现在（2021 年 5 月）它在除 Safari 之外的几乎所有流行浏览器中都受支持（在预览版中可用）。
MDN 链接：https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
https://web.dev/aspect-ratio/ 还包含使用该属性的好例子

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

13 个答案: