」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 CSS 讓圖片隨瀏覽器大小自動調整大小?

如何使用 CSS 讓圖片隨瀏覽器大小自動調整大小?

發佈於2024-11-07
瀏覽:232

How to Make Images Resize Automatically with Browser Size Using CSS?

使用CSS 根據瀏覽器大小自動調整圖片大小

您希望在調整瀏覽器視窗大小時自動調整圖片大小,但提供的代碼不工作。讓我們研究一個解決方案。

為了讓影像靈活,您需要在它們中加入 max-width: 100% 和 height: auto 。然而,IE8 有一個錯誤,這不起作用。若要修復此問題,請為 IE8 新增 width: auto\\9。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

使用 img 標籤新增的任何影像現在都會自動調整大小。

為了說明這一點,這裡有一個不需要 JavaScript 的 JSFiddle 範例。它與最新版本的 Chrome、Firefox 和 IE 相容(基於測試)。

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3