搜尋

首頁  >  問答  >  主體

如何在保持固定影像尺寸的同時實現響應式設計?

<p>我有以下的CSS(使用Bootstrap)來調整圖像大小,使其適應16:9的容器而不會拉伸:</p> <pre class="brush:php;toolbar:false;"><span class="bg-dark d-flex justify-content-center align-items-center style="width: 384px; height: 216px"> <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="max-width: 100%; max-height: 100%" /> </span></pre> <p>這個方法是有效的,但是當我在Bootstrap網格中使用它時,圖像會溢出網格(我認為是因為我用絕對值固定了大小)。我該如何使圖像調整大小,但不溢出? </p> <p>(背景資訊:這是在一個畫廊組件中使用的,進來的圖像可能是不同的大小,所以我需要將它們全部調整為相同大小的容器中顯示,頂部或底部可能會有黑色的邊距)</p>
P粉739706089P粉739706089567 天前523

全部回覆(1)我來回復

  • P粉191610580

    P粉1916105802023-08-17 00:28:09

    要解決這個問題,您可以使用object-fit CSS屬性。 object-fit屬性指定了影像應如何調整大小以適應其容器。 cover值將調整影像大小以填充整個容器,同時保持其縱橫比。

    <span class="bg-dark d-flex justify-content-center align-items-center">
      <img
        :src="slotProps.item.itemImageSrc"
        :alt="slotProps.item.alt"
        style="object-fit: cover; max-width: 100%; max-height: 100%"
      />
    </span>

    回覆
    0
  • 取消回覆