div容器內圖片寬度自適應，高度固定且不失真，如何實現？

網頁圖片自適應顯示：保持比例，避免變形

在網頁設計中，圖片大小調整是一個常見問題。當圖片寬度超過容器時，如何既保持圖片比例又不失真，是許多開發者面臨的挑戰。本文將通過一個案例，詳細講解如何解決這個問題。

問題： 一個寬度為50%的div容器需要容納一張寬幅圖片，直接放入會導致圖片被壓縮變形。目標是：圖片高度固定，寬度自動適應容器，同時保持原有比例，避免失真。

初始代碼：

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

解決方案： 使用css屬性控制圖片顯示方式，實現圖片寬度自適應，高度固定。

修改后的代碼：

<div style="width:50%; height: 200px;">  <!--  添加了父容器高度 -->   @@##@@ </div>

通過 width: auto; height: 100%;，圖片寬度會自動根據容器寬度調整，高度則設置為容器高度的100%。這樣，圖片就能保持原始比例，完整顯示在容器內，避免變形。

關鍵點： 父容器div必須設置一個明確的高度（例如 height: 200px; 或者使用其他方法確定高度），否則圖片高度無法確定，無法實現自適應效果。 您可以根據實際需求調整父容器的高度。

通過以上方法，您可以輕松解決圖片在div容器內寬度自適應、高度固定且不失真的問題，提升網頁布局的整體效果。