图中图像的长宽比

Question

我有一个带有标题的图像，就像这样：

<figure>
<img src="image.jpg"/>
<figcaption>标题</figcaption>
</figure>

我在CSS中还有img{max-width:100%}。

我想同时设置图像的宽度和高度，并在宽度减小到其设置值以下时保持其纵横比。所以，我尝试了这样的代码：

<figure>
<img src="image.jpg" width="100" height="200" style="object-fit:contain"/>
<figcaption>标题</figcaption>
</figure>

这大致是我想要的，但是当图像被'letterboxed'时，标题离图像底部的距离很远。

有没有办法在保持标题紧贴图像底部的同时获得我想要的结果？

Answer 1

如果您正在使用object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figure元素的顶部和底部会添加额外的25px的空间。

要解决这个问题，您只需要将高度设置为“auto”。

img {
  // 为了可读性，将您的样式声明移到这里
  width: 100px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

现在，如果您实际上想要定义宽度和高度，并强制图像符合这些尺寸，您应该使用除object-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figure元素的宽度/高度并让图像填充该空间。在这种情况下，您可以这样做：

figure {
    display: block;
    width: 100px;
    max-width: 100%;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: blue;
}