如何使用 CSS 將超大圖片置於 Div 中？

使用 CSS 將超大圖像在 Div 中居中

使用 div 寬度變化的流體佈局時，將超大圖像在 div 中居中可能會具有挑戰性。影像可能從左邊緣開始，使其偏離中心到右側。

為了解決這個問題，我們提出了一個CSS 解決方案，可以有效地將圖像居中，在兩側邊緣創建均勻的溢出截止：

<code class="css">.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}</code>

父div 建立相對定位並包含溢出。包含影像的子 div 具有絕對定位，具有極其負的頂部、底部、左側和右側值。這些負值有效地將影像推到 div 的可見區域之外。 margin: auto 屬性確保映像檔在父 div 內自動居中。

此技術可讓影像保持其原始寬高比，消除任何瀏覽器施加的可能會影響影像品質的調整大小問題。結果是一個居中的超大圖像，帶有溢出，兩側均勻裁剪。

以上是如何使用 CSS 將超大圖片置於 Div 中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！