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

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

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

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

初始代碼：

<div style="width:50%;">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174277896468460.png?x-oss-process=image/resize,p_40" class="lazy" alt="div容器內圖片寬度自適應，高度固定且不失真，如何實現？">
</div>

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

修改後的代碼：

<div style="width:50%; height: 200px;"> <!-- 添加了父容器高度-->
  <img src="/static/imghwm/default1.png" data-src="/seller/templates/img/bg_logo_left.png" class="lazy" alt=""   style="max-width:90%">
</div>

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

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

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

以上是div容器內圖片寬度自適應，高度固定且不失真，如何實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！