使用CSS自动调整浏览器大小的图像大小

一尘不染

使用CSS自动调整浏览器大小的图像大小

css

我希望在调整浏览器窗口大小时自动调整所有（或部分）图像的大小。我发现了以下代码-尽管它什么也没做。

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>

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; 
}

在调整浏览器窗口的大小时，如何基本设置全屏设计（带有background-size:cover），并使div元素处于完全相同的位置（明智的选择），同时它们的大小也进行调整（就像cover对背景一样）？

阅读 706

2020-05-16

共1个答案

一尘不染

要使图像灵活，只需添加max-width:100%和height:auto。图像max-width:100%并height:auto在IE7中有效，但在IE8中无效（是的，另一个怪异的IE错误）。要解决此问题，您需要添加width:auto\9IE8。

例如：

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

然后您只需使用img标签添加的任何图像都将很灵活

JSFiddle示例。无需JavaScript。在最新版本的Chrome，Firefox和IE（我测试过的所有版本）中均可使用。

2020-05-16