如何讓圖片在固定寬度容器內(nèi)自適應(yīng)高度且不失真？

網(wǎng)頁圖片自適應(yīng)寬度，保持比例：完美解決圖片失真難題

在網(wǎng)頁設(shè)計中，經(jīng)常需要將圖片嵌入固定寬度的容器內(nèi)，同時又要保證圖片不失真。本文將通過一個實際案例，講解如何讓圖片在固定寬度容器內(nèi)自適應(yīng)高度，并保持其原始比例。

問題：開發(fā)者使用一個寬度為50%的div容器來顯示圖片，但圖片原始寬度遠(yuǎn)大于容器寬度，導(dǎo)致圖片變形。原始代碼如下：

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

目標(biāo)：僅設(shè)置圖片高度，讓圖片寬度自動適應(yīng)容器寬度，避免圖片失真。

解決方案：通過css樣式控制圖片顯示方式。將圖片的width屬性設(shè)置為auto，height屬性設(shè)置為100%。這樣，圖片高度將充滿父容器，寬度則根據(jù)圖片原始比例自動調(diào)整，確保圖片比例不變。修改后的代碼如下：

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

通過以上方法，圖片將在保持其原始比例的同時，完美適應(yīng)50%寬度的容器，徹底解決圖片失真問題。