使用 CSS 動態調整圖片大小
響應式設計通常需要圖片隨著瀏覽器視窗的變化動態調整其大小。雖然提供的程式碼看起來很有前途，但它在某些瀏覽器中面臨問題，特別是在 Chrome 和 Safari 中。
為了克服這些問題，無需 JavaScript 的純 CSS 解決方案是可能的。以下是實現動態影像調整大小的方法：
首先，確保影像的最大寬度為 100%。這使得它們可以在瀏覽器視窗縮小時縮小，而不會超過其原始寬度。此外，將高度設為 auto 以允許影像適應其內容高度。
為了相容於 IE8，請包含屬性 width：auto9。這可確保寬高比較窄的影像在 IE8 中不會拉伸得太寬。
如果您希望影像具有固定的最大寬度，請將它們放置在容器中並指定其最大寬度。例如：
<div>
整體而言，使用 max-width:100%、height:auto 和 width: auto9（對於 IE8）為使用 CSS 動態調整圖片大小提供了一個萬無一失的解決方案。此方法在 Chrome、Firefox 和 IE 中無縫運作。
以上是如何用純CSS實現動態圖片大小調整？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
