如何使用 CSS 使圖片隨瀏覽器視窗自動調整大小？-css教學-PHP中文網

如何使用 CSS 使圖片隨瀏覽器視窗自動調整大小？

Linda Hamilton

發布： 2024-10-26 04:09:02

原創

404 人瀏覽過

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

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

問題：

問題：

<code class="html"><!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</html></code>

登入後複製

您的圖片不會自動調整當您調整瀏覽器視窗大小時也調整大小。您已嘗試以下代碼，但不起作用：

HTML:

<code class="css">body {
    font-family: Arial;
    font-size: 11px;
    color: #ffffff;
    background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
    background-size: cover;
}

#icons {
    position: absolute;
    bottom: 22%;
    right: 8%;
    width: 400px;
    height: 80px;
    z-index: 8;
    transform: rotate(-57deg); 
    -ms-transform: rotate(-57deg); 
    -webkit-transform: rotate(-57deg); 
    -moz-transform: rotate(-57deg);
}

#contact { 
    float: left; 
    cursor: pointer; 
}


img { 
    max-width: 100%; 
    height: auto; 
}</code>

登入後複製

CSS:

解決方案：

<code class="css">img {
    max-width: 100%;
    height: auto;
    width: auto; /* for IE8 compatibility */
}</code>

登入後複製

要使影像靈活，請新增以下CSS 屬性：

透過將max-width 設定為100%，影像將永遠不會超過其容器的寬度。將高度設定為自動允許影像在調整大小時保持其縱橫比。 width: auto9 覆寫對於 IE8 相容性是必要的。設定這些屬性後，您使用 img 標籤新增的任何影像都會自動調整大小以適合瀏覽器視窗的大小。

JSFiddle 演示：

您可以在此JSFiddle 中看到此解決方案的現場演示：

https://jsfiddle.net/ mjc5ue0z/此解決方案不需要JavaScript。它適用於最新版本的 Chrome、Firefox 和 IE（經過測試的版本）。

以上是如何使用 CSS 使圖片隨瀏覽器視窗自動調整大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！