圖中影像的長寬比
P粉557957970
P粉557957970 2023-08-17 20:24:04
0
1
483
<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>
P粉557957970
P粉557957970

全部回覆(1)
P粉547362845

如果您正在使用object-fit: contain,那麼映像的原始寬高比已經被保留,因為整個映像必須適應其父元素。所以,如果圖像原始寬度為100px,高度為150px,並且您將圖像設定為width: 100pxheight: 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;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板