如何讓圖片寬度自適應(yīng)容器寬度，且高度100%填充父容器？

網(wǎng)頁圖片自適應(yīng)：保持比例，填充容器

在網(wǎng)頁設(shè)計(jì)中，圖片的寬高自適應(yīng)是一個(gè)常見問題。特別是當(dāng)圖片的原始比例與目標(biāo)容器比例不符時(shí)，常常導(dǎo)致圖片變形。 本文將解決一個(gè)典型問題：如何在保持圖片比例的同時(shí)，讓圖片寬度自適應(yīng)容器寬度，并使高度充滿整個(gè)容器。

問題場景：一個(gè)寬度為50%的div容器內(nèi)，包含一張寬度遠(yuǎn)大于50%的圖片。直接插入圖片會(huì)導(dǎo)致圖片被壓縮變形。

問題分析： 瀏覽器默認(rèn)會(huì)根據(jù)圖片本身的寬高比進(jìn)行渲染。如果只設(shè)置父容器寬度，圖片會(huì)按照其自身比例進(jìn)行縮放，導(dǎo)致失真。

解決方案：關(guān)鍵在于同時(shí)控制圖片的寬度和高度。 不能只設(shè)置高度，因?yàn)檫@會(huì)強(qiáng)制拉伸圖片。正確的做法是：設(shè)置圖片寬度為auto，讓其根據(jù)父容器寬度自適應(yīng)；同時(shí)設(shè)置高度為100%，使其充滿父容器。

代碼示例：

<div style="width:50%;">   @@##@@ </div>

通過width: auto; height: 100%;，圖片寬度會(huì)根據(jù)父容器（50%寬度div）自動(dòng)調(diào)整，高度則會(huì)填充整個(gè)父容器。 Object-fit: cover; 屬性可以確保圖片完全覆蓋容器，并裁剪超出部分，保持最佳視覺效果。 如果沒有object-fit: cover;，圖片可能會(huì)在容器內(nèi)顯示較小，留有空白。

通過以上方法，即可實(shí)現(xiàn)圖片在父容器內(nèi)自適應(yīng)顯示，同時(shí)保持其原始比例，避免失真。