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

问题描述：

我调整浏览器视窗大小时，系统会自动调整所有（或部分）图片的大小。
我找到了以下代码 - 它不会做任何事情。

I want all (or just some) of my images getting resized automatically when I resize my browser window. I've found the following code - it doesn't do anything though.

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

div 元素位于完全相同的位置（％明智），其大小也是

How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?

答

$ b $ b
为了使图像更加灵活，只需添加 max-width：100％和
height：auto 。在IE7，
中工作的图像 max-width：100％和 height：auto 是的，另一个奇怪的IE错误）。要解决这个问题，您需要为IE8
add width：auto\9 。

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

：
http://webdesignerwall.com/tutorials/responsive-design-with-css3 -media-queries

例如：

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

，然后使用img标签将灵活

and then any images you add simply using the img tag will be flexible

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

相关推荐