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

我使用 HTML 的 img 标记来显示我们应用程序中的一张照片。我已经将它的高度和宽度属性都设置为64。我需要显示任何图像分辨率(例如256x256,1024x768,500x400,205x246，等等)为64x64。但是通过将 img 标记的高度和宽度属性设置为64，就不能保持长宽比，因此图像看起来会失真。

供你参考，我的确切代码是:

<img src="Runtime Path to photo" border="1" height="64" width="64">
314010 次浏览
小开

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

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

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

.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;
}


.fill {
object-fit: fill;
}


.contain {
object-fit: contain;
}


.cover {
object-fit: cover;
}


.scale-down {
object-fit: scale-down;
}
<img src="https://placeimg.com/200/500/any/grayscale" class="fill" />


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


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


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

小开

为什么不使用一个单独的 CSS 文件来维护要显示的图像的高度和宽度？通过这种方式，您可以提供必需的宽度和高度。

例如:

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

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

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

翻译: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴，校对: 小提琴

如果希望在64x64px“帧”中显示任意大小的图像，可以使用行内块包装器并对其进行定位，如 在这把小提琴里。

小开

没有一种方法列出缩放的图像，以最大可能的大小，适合在一个框，同时保留所需的纵横比。

这不能用 IMG 标记来实现(至少不能没有一点 JavaScript) ，但是可以按照以下方法来实现:

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

这是样品

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>

小开

试试这个:

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

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

小开

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

例如:

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

使用 css:

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

在大多数情况下，海报显示的是一个受高度限制的维度，他张贴了 > > (256x256,1024x768,500x400,205x246，等等) ，但是符合64px 最大高度像素维度，这是大多数风景“照片”的典型特征。所以我猜他想要一个高度总是64像素的图像。为了实现这一目标，需要采取以下措施:

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

这个解决方案保证图像的高度都是最大的64像素，并允许宽度扩展或缩小的基础上，每个图像的高宽比。在 img height属性中将高度设置为64将在浏览器的 Rendertree 布局中保留一个空间作为图像下载，这样内容就不会在等待图像下载时发生变化。此外，新的 HTML5标准并不总是尊重宽度和高度属性。它们只是维度“暗示”，而不是图像的最终维度。如果在样式表中重置或更改图像高度和宽度，则图像属性中的实际值将被重置为 CSS 值或图像本机默认尺寸。将 CSS height设置为“64px”，将 width设置为“ auto”，将迫使 width 从本机图像宽度(而非图像属性宽度)开始，然后使用 CSS 样式计算新的高宽比。那会给你一个新的宽度。所以这里真的不需要高度和宽度“ img”属性，只需要强制浏览器执行额外的计算。

小开

有一个新的 CSS 属性 aspect-ratio。它为箱体设置了一个优先的长宽比，用于计算自动尺寸和其他一些布局函数。

img {
width: 100%;
aspect-ratio: 16/9;
}
它在所有的浏览器中都得到了很好的支持 MDN 链接: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio < br/> https://web.dev/aspect-ratio/包含了使用这个属性

的好例子
小开

我的网站显示了许多照片(有各种各样的纵横比) ，点击其中一张就会打开一个模态。为了使它不需要剪切、滚动或失真就能适应模态，我在 img 标记上使用了以下类

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

您需要一个 div 来包装您的图像，以获得一致的高宽比。

您可以使用填充底部的技巧来强制 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>

小开

你可以设置 长宽比

img {
width: 64px;
aspect-ratio: 1/1;
}
<img src="Runtime Path to photo" border="1">


提交答案