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

Posted 2023-03-05

【中文标题】如何使用 HTML IMG 标签保持纵横比

【英文标题】：How to maintain aspect ratio using HTML IMG tag

【发布时间】：2012-10-06 09:30:53

【问题描述】：

我正在使用 html 的 img 标签在我们的应用程序中显示照片。我已将其高度和宽度属性设置为 64。我需要将任何图像分辨率（例如 256x256、1024x768、500x400、205x246 等）显示为 64x64。但是通过将img标签的height和width属性设置为64，它并没有保持纵横比，所以图像看起来失真了。

供您参考，我的确切代码是：

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

【问题讨论】：

HTML/IE: stretch image to fit, preserve aspect ratio的可能重复

【参考方案1】：

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

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

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

【讨论】：

这就是我要找的。祝福现代 CSS！

【参考方案2】：

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

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

【参考方案3】：

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

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

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

【参考方案4】：

使用 css：

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

【讨论】：

欢迎来到 Stack Overflow！我建议您阅读How to answer a question 以提高帮助提出问题的用户的可能性。

【参考方案5】：

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

例如：

img 
    ...
    object-fit: contain
    ...

【参考方案6】：

试试这个：

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

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

【参考方案7】：

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

【讨论】：

这是正确的解决方案，因为它继续独立于图像的方向。 3rror404 的解决方案要求您知道图像是宽还是高，反之亦然。

还将width 和height 设置为auto。

限制高度和宽度的正确解决方案。

图像将被适当地限制，但不会超出其原始大小。虽然从开篇文章中不能确定 OP 想要哪一个。

【参考方案8】：

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

.widthSet 
    max-width: 64px;


.heightSet 
    max-height: 64px;

<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250"  />

<img src="http://placehold.it/200x250"  />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />

【讨论】：

...但是如果你想同时修复高度和宽度怎么办？

这对动态应用程序没有意义。不知道宽度或高度是否为 64 像素，因为它取决于图像的比例。为什么这是赞成的回应？

@Mär 这个问题是关于固定宽度和/或高度的图像。响应能力不是问题的要求。

尺寸是固定的，纵横比不是，因为问题是关于 any 分辨率的 any 图像。包括小于 64x64 的分辨率。

【参考方案9】：

这是一个示例

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>

【讨论】：

只是给想要使用此解决方案的人的注意事项：浏览器不太支持对象拟合。 IE 或 Edge 根本不支持它。来源：caniuse.com/#feat=object-fit

现在支持 Edge 16+，见表：w3schools.com/css/css3_object-fit.asp

【参考方案10】：

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

使用 IMG 标记无法做到这一点（至少在没有一点 javascript 的情况下不能做到），但可以通过以下方式完成：

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

【讨论】：

是的。使用style="background: url('_'); background-size: cover width:_px height:_px" 作为<img> 标签。

谢谢，@UjjwalSingh。实际上，我们需要cover 而不是contain 才能将图像尺寸最大化。 contain 导致“信箱”。

【参考方案11】：

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

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

Fiddle

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

【讨论】：

不会超出原始尺寸，仅低于原始尺寸。

这在我将父级更改为“align-items: center”之后起作用。 “align-items:stretch”的默认值优先于“max-height”。

【参考方案12】：

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

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

【参考方案13】：

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

例如：

       image 
       width: 64px;
       height: 64px;