首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用CSS根据浏览器大小自动调整图像大小

使用CSS根据浏览器大小自动调整图像大小
EN

Stack Overflow用户
提问于 2013-04-25 22:23:28
回答 3查看 406.6K关注 0票数 68

我希望在调整浏览器窗口大小时自动调整所有(或仅部分)图像的大小。我找到了下面的代码--它什么也做不了。

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对背景所做的那样)?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16217355

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档