84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我有一個有標題的圖片，就像這樣：
標題
我在CSS還有img{max-width:100%}。
img{max-width:100%}
我想同時設定影像的寬度和高度，並在寬度減小到其設定值以下時保持其縱橫比。所以，我嘗試了這樣的程式碼：
這大致是我想要的，但是當圖像被'letterboxed'時，標題離圖像底部的距離很遠。
有沒有辦法在保持標題緊貼圖像底部的同時獲得我想要的結果？
如果您正在使用object-fit: contain，那麼映像的原始寬高比已經被保留，因為整個映像必須適應其父元素。所以，如果圖像原始寬度為100px，高度為150px，並且您將圖像設定為width: 100px和height: 200px，圖像的高度仍然為150px，但是在figure元素的頂部和底部會增加額外的25px的空間。
object-fit: contain
width: 100px
height: 200px
figure
要解決這個問題，您只需要將高度設定為「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; }
如果您正在使用
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; }