<p>我有一個有標題的圖片，就像這樣：</p> <pre class="brush:php;toolbar:false;"><figure> <img src="image.jpg"/> <figcaption>標題</figcaption> </figure></pre> <p>我在CSS還有<code>img{max-width:100%}</code>。 </p> <p>我想同時設定影像的寬度和高度，並在寬度減小到其設定值以下時保持其縱橫比。所以，我嘗試了這樣的程式碼：</p> <pre class="brush:php;toolbar:false;"><figure> <img src="image.jpg" width="100" height="200" style="object-fit:contain"/> <figcaption>標題</figcaption> </figure></pre> <p>這大致是我想要的，但是當圖像被'letterboxed'時，標題離圖像底部的距離很遠。 </p> <p>有沒有辦法在保持標題緊貼圖像底部的同時獲得我想要的結果？ </p>

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

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