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

Question

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

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

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

- sunil kumar

---

可能是HTML/IE：拉伸图像以适应，保持纵横比的重复问题。 - Jonathon Reinhart

在2022年，您可能需要这个答案：https://dev59.com/vmcs5IYBdhLWcg3wXixD#66618563除了ie之外，aspect-ratio被所有浏览器支持：https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio#browser_compatibility - lauchness

Answer 1

不要同时设置高度和宽度。只使用其中一个，就可以保持正确的纵横比。

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}

<img src="https://placeimg.com/200/500/any/grayscale" />

<img src="https://placeimg.com/200/500/any/grayscale" width="64" />

<img src="https://placeimg.com/200/500/any/grayscale" height="64" />

<img src="https://placeimg.com/200/500/any/grayscale" class="widthSet" />

<img src="https://placeimg.com/200/500/any/grayscale" class="heightSet" />

另一个更灵活的选择是使用 object-fit。这允许设置img的固定尺寸，同时图像本身可以以多种不同的方式在定义的区域中呈现。

img {
    width: 128px;
    height: 128px;
    border: 1px solid hotpink;
}

.none {
  /* Image is not scaled */ 
  object-fit: none;
}

.fill {
  /* Image is scaled to fill the container. */
  /* Aspect ratio IS NOT maintained */
  object-fit: fill;
}

.cover {
  /* Image is scaled to fill the container. */
  /* Aspect ratio IS maintained */
  object-fit: cover;
}

.contain {
  /* Image is scaled to fit within the container. */
  /* Aspect ratio IS maintained */
  object-fit: contain;
}

.scale-down {
  /* Uses either 'none' or 'contain' to produce the smallest image size */
  object-fit: scale-down;
}

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="none" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="fill" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="cover" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="contain" />

<img src="https://picsum.photos/seed/stackoverflow/200/300" class="scale-down" />

- Turnip

---

如果您想同时固定高度和宽度怎么办？ - fatuhoku

对于动态应用程序来说，这毫无意义。因为它取决于图像的比例，所以无法确定宽度或高度是否为64px。为什么这个回答会被赞同？ - Koenigsberg

这个问题涉及固定宽度和/或高度的图片，响应式不是问题的要求。 - Turnip

尺寸是固定的，宽高比不是固定的，因为问题特别提到了任何分辨率的任何图像。这包括小于64x64的分辨率。 - Koenigsberg

这对我有用，但是这在所有浏览器中都是标准的吗？是否有相关的参考资料？ - Arel

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>

- AKHIL P

---

提示：想要使用此解决方案的人需要注意，浏览器对 object-fit 的支持程度不太好。IE 和 Edge 根本不支持它。来源：http://caniuse.com/#feat=object-fit - Sean Dawson

现在已经支持 Edge 16+，请参考表格：https://www.w3schools.com/css/css3_object-fit.asp - Eddy R.

Answer 3

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

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

Fiddle

如果您想在64x64像素的“框架”中显示任意大小的图像，可以使用内联块包装器和定位，例如在这个fiddle中。

- Ilya Streltsyn

---

仅能缩小至原始大小以下，无法放大至原始大小以上。 - Koenigsberg

在将父元素更改为“align-items: center”后，这个问题得到了解决。默认的“align-items: stretch”优先于“max-height”。 - Trade-Ideas Philip

Answer 4

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

- Lucio Fonseca

---

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

同时将 width 和 height 设置为 auto。 - Mahmood Dehghan

同时约束高度和宽度的正确解决方案。 - Pavan Kumar

这将适当“限制”图像的大小，但不会超出其原始尺寸。虽然从帖子开头无法确定用户想要哪种情况。 - Koenigsberg

Answer 5

在HTML元素的CSS中使用object-fit: contain。

例如：

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

- Ankit Kumar Verma

Answer 6

现在有一个新的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/中包含了使用此属性的良好示例。

- AlexElin

---

这就是我寻找的东西，感谢现代 CSS！ - Brad Turek

这应该是新的被接受的答案。 - lauchness

Answer 7

没有一种列出的方法可以将图像按比例缩放到适合的框中的最大尺寸并保留所需的宽高比。

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

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

- Anonymous Coward

---

是的。对于<img>标签，请使用style="background: url('_'); background-size: cover width:_px height:_px"。 - Ujjwal Singh

谢谢，@UjjwalSingh。确实，我们需要使用“覆盖”而不是“包含”，以便将图像的大小最大化到可能的最大值。“包含”会导致“信箱留白”。 - Ortwin Gentz

Answer 8

将图像包装在一个尺寸为64x64的

中，并将width: inherit设置为图像：

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

- Konstantin Dinev

Answer 9

试试这个：

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

添加 object-fit="cover" 属性会强制图片占用空间，而不会失去其纵横比。

- Nick friesen

Answer 10

您可以设置宽高比

img {
  width: 64px;
  aspect-ratio: 1/1;
}

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

- kennarddh