如何使用 HTML IMG 标签保持纵横比

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

.widthSet { 最大宽度：64px; } .heightSet { 最大高度：64px; }

另一个为您提供更大灵活性的选项是使用 object-fit。这允许为 img 设置固定尺寸，而图像本身可以在定义的区域内以多种不同的方式呈现。。

img { 宽度：64px;高度：64px；边框：1px 实心粉红色； } .fill { 对象拟合：填充； } .contain { 对象适配：包含； } .cover { 对象拟合：覆盖； } .scale-down { 对象拟合：按比例缩小； }

---

这是示例之一

div{ 宽度：200px;高度：200px；边框：实心}img{宽度：100%；高度：100%；适合对象：包含； }

---

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

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

Fiddle

如果您想在 64x64 像素的“帧”中显示任意大小的图像，您可以使用内联块包装器并为其定位，例如 in this fiddle。

---

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

---

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

前任：

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

---

列出的所有方法都没有将图像缩放到适合盒子的最大尺寸，同时保持所需的纵横比。

这不能用 IMG 标记来完成（至少在没有一点 JavaScript 的情况下不能），但可以按如下方式完成：

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

---

有一个新的 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/ 包含使用此属性的好例子

---

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

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

---

尝试这个：

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

添加 object-fit="cover" 将强制图像占用空间而不会丢失纵横比。

---

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

例如：

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

---

我的网站显示了许多照片（具有各种宽高比），单击其中一张以模式打开它。为了让它适合模态而不裁剪、滚动或扭曲，我在我的 img 标签上使用了以下类

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

---

您需要一个 div 来包装您的图像以获得一致的纵横比。

您可以使用 padding-bottom 技巧来强制 div 遵守纵横比和绝对定位的图像来填充空间。

图像也会响应，占用所有可用的水平空间。

.img-frame{ 宽度：100%;底部填充：100%；背景：灰色；溢出：隐藏；位置：相对； } .img-frame-4by3{ padding-bottom: 75%; } .img-frame-16by9{ padding-bottom: 56.25%; } .img-frame-5by1{ padding-bottom: 20%; } .img-frame img{ 位置：绝对；左：0；顶部：0；宽度：100%；高度：100%；适合对象：封面； }

---

使用CSS：

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

---

在他发布的大多数情况下，张贴者显示的尺寸受高度限制 >>>（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 样式计算新的纵横比作为高度。这会给你一个新的宽度。所以height和width“img”属性在这里真的不需要，只是强制浏览器进行额外的计算。

---

您可以设置 aspect ratio

img { 宽度：64px;纵横比：1/1； }

---