圖中影像的長寬比
P粉557957970
2023-08-17 20:24:04
<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>
如果您正在使用
object-fit: contain
,那麼映像的原始寬高比已經被保留,因為整個映像必須適應其父元素。所以,如果圖像原始寬度為100px,高度為150px,並且您將圖像設定為width: 100px
和height: 200px
,圖像的高度仍然為150px,但是在figure
元素的頂部和底部會增加額外的25px的空間。要解決這個問題,您只需要將高度設定為「auto」。
現在,如果您實際上想要定義寬度和高度,並強制圖片符合這些尺寸,您應該使用除
object-fit: contain
之外的其他方法。您可以在這裡了解其他選項,但也許您想設定figure
元素的寬度/高度並讓圖像填滿該空間。在這種情況下,您可以這樣做: