如何讓圖片在固定寬度容器內自適應高度且不失真？

網頁圖片自適應寬度，保持比例：完美解決圖片失真難題

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

問題：開發者使用一個寬度為50%的div容器來顯示圖片，但圖片原始寬度遠大於容器寬度，導致圖片變形。原始代碼如下：

<div style="width:50%;">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174269005866879.png" class="lazy" alt="如何讓圖片在固定寬度容器內自適應高度且不失真？">
</div>

目標：僅設置圖片高度，讓圖片寬度自動適應容器寬度，避免圖片失真。

解決方案：通過CSS樣式控製圖片顯示方式。將圖片的width屬性設置為auto ， height屬性設置為100% 。這樣，圖片高度將充滿父容器，寬度則根據圖片原始比例自動調整，確保圖片比例不變。修改後的代碼如下：

<div style="width:50%;">
  <img src="/static/imghw/default1.png" data-src="/seller/templates/img/bg_logo_left.png" class="lazy" alt=""   style="max-width:90%">
</div>

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

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