如何使用css使用浏览器大小自动调整图像大小?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (239)

当我调整浏览器窗口的大小时,我希望所有(或一些)图像都能自动调整大小。我找到了下面的代码-但是它不运行:

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元素在调整浏览器窗口大小时处于完全相同的位置(%WISE),它们的大小也在调整(如cover是为背景而做)的吗?

提问于
用户回答回答于

这里是JSFiddle 的例子:https://jsfiddle.net/jaanhaitojahanhai/cnudrxgq/

不需要JavaScript,可以再最新版本的Chrome,Firefox和IE中运行。

用户回答回答于

图像容器

使用上述技巧的缩放图像只有在容器的图像处于更改大小的情况下才有效。

#icons容器使用px值作为宽度和高度。 调整浏览器大小时,px值不会缩放。

解决方法:

使用下列方法之一:

  1. 使用%值。

2. 根据当前屏幕大小使用一系列@media查询将宽度和高度设置为不同的值。

扫码关注云+社区

领取腾讯云代金券