logo标签列表

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

htmlcss
204
我正在使用HTML的img标签在我们的应用程序中展示一张照片。我已经将它的高度和宽度属性都设置为64。我需要以64x64的形式展示任何图像分辨率（例如256x256，1024x768，500x400，205x246等）。但是，通过将img标签的高度和宽度属性设置为64，它并没有保持纵横比，因此图像看起来失真。
供您参考，我的确切代码如下：
<img src="Runtime Path to photo" border="1" height="64" width="64">
可能是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
16个回答
1
为什么不使用单独的CSS文件来维护您想要显示的图像的高度和宽度？这样，您可以提供必要的宽度和高度。
例如：
       image {
       width: 64px;
       height: 64px;
       }
1
您需要使用 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>

1

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

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

使用 CSS：

.img {
    display:table-cell;
    max-width:...px;
    max-height:...px;
    width:100%;
}
1
欢迎来到 Stack Overflow！我建议您阅读 如何回答问题 以提高帮助提问者的可能性。 - Ivanhercaz
0
海报中显示了大多数情况下由高度限制的尺寸（例如256x256, 1024x768, 500x400, 205x246等），但适合于最常见的横向“照片”的64像素最大高度像素尺寸。因此，我猜他想要一个始终为64像素高的图像。要实现这个目标，请执行以下操作：
<img id="photo1" style="height:64px;width:auto;" src="photo.jpg" height="64" />

这个解决方案保证了所有图片的高度都不超过64像素，并允许宽度根据每个图片的宽高比进行扩展或缩小。在img标签的height属性中设置高度为64会在图片下载时在浏览器的渲染树布局中预留空间，因此内容不会因等待图片下载而发生移动。此外，新的HTML5标准并不总是遵循width和height属性。它们只是尺寸的“提示”，而不是图像的最终尺寸。如果在样式表中重置或更改图像的高度和宽度，则图像属性中的实际值将被重置为您的CSS值或图像本身的默认尺寸。将CSS的height设置为“64px”，将width设置为“auto”会强制宽度从原始图像宽度（而不是图像属性宽度）开始，并使用高度的CSS样式计算新的宽高比。这样就得到了一个新的宽度。因此，在这里并不真正需要高度和宽度的“img”属性，它们只会迫使浏览器进行额外的计算。

0
最佳实践是在img标签中使用固定的“宽度”和“高度”属性，因为浏览器在加载图像之前应该知道需要保留多少空间，以避免在加载期间出现布局闪烁。只需在CSS中覆盖其中一个值为“auto”即可。 

img {
  height: auto;
}
<img src="/sample.jpg" width="200" height="166">

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接