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

Question

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

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

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

score 149 · Accepted Answer

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

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

score 98 · Accepted Answer

这是示例之一

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>

score 57 · Accepted Answer

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

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

小提琴

如果您想在 64x64px“帧”中显示任意大小的图像，您可以使用 inline-block 包装器并为它们定位，就像在这个 fiddle中一样。

score 46 · Accepted Answer

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

score 23 · Accepted Answer

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

前任：

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

score 14 · Accepted Answer

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

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

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

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

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

score 3 · Accepted Answer

尝试这个：

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

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

score 1 · Accepted Answer

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

例如：

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

score 1 · Accepted Answer

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

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

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

.img-frame{
  width: 100%;
  padding-bottom: 100%;
  background: gray;
  overflow: hidden;
  position: relative;
}

.img-frame-4by3{
  padding-bottom: 75%;
}

.img-frame-16by9{
  padding-bottom: 56.25%;
}


.img-frame-5by1{
  padding-bottom: 20%;
}


.img-frame img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div style="max-width:100px; margin: 1rem auto;">
  
  <p>4:3</p>
  <div class="img-frame img-frame-4by3">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
  <br />
  
  <p>16:9</p>
  <div class="img-frame img-frame-16by9">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
  <br />
  
  <p>5:1</p>
  <div class="img-frame img-frame-5by1">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
</div>

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

使用CSS：

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

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

14 回答 14

Related

Reference