圖中影像的長寬比

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