Das Seitenverhältnis des Bildes im Bild

Question

Ich habe ein Bild mit einer Bildunterschrift wie dieser:

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

Ich habe auch img{max-width:100%}

Ich möchte sowohl die Breite als auch die Höhe eines Bildes festlegen und sein Seitenverhältnis beibehalten, wenn die Breite unter den eingestellten Wert sinkt. Also habe ich Code wie diesen ausprobiert:

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

Das ist ungefähr das, was ich möchte, aber wenn das Bild „Letterbox“ ist, ist der Titel ziemlich weit vom unteren Rand des Bildes entfernt.

Gibt es eine Möglichkeit, die gewünschten Ergebnisse zu erzielen und gleichzeitig den Titel am unteren Rand des Bildes zu belassen?

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