自动调整大小与浏览器的大小使用CSS图片(Automatically resize images w

我想，当我调整我的浏览器窗口中的所有我的图片（或者只是一些）得到自动调整大小。我发现下面的代码 - 它并不虽然做任何事情。

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是做背景）？

Answer 1:

为了使图像灵活，只需添加max-width:100%和height:auto 。图片max-width:100%和height:auto在IE7的作品，但不是在IE8（是的，另一个奇怪的IE漏洞）。为了解决这个问题，你需要添加width:auto\9的IE8。
来源： http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

例如：

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

然后您添加只需使用img标签的任何图片都可以灵活

这里的jsfiddle例子。无需JavaScript的。作品在Chrome，Firefox和IE（这是所有我测试过）的最新版本。

Answer 2:

图像容器

使用上述伎俩缩放图像只有在容器中的图像的变化大小的作品。

所述#icons容器使用px值的宽度和高度。 px当浏览器大小值不能扩展。

解决方案

使用以下方法之一：

限定的宽度和/或使用高度%的值。
使用一系列@media查询设定基于当前屏幕尺寸的宽度和高度不同的值。

Answer 3:

这可能是过于简单化的答案（我还是新来的），但我在过去做了改变这种局面想通了，我想的图像占据屏幕的百分比。例如，有一个网页，我在哪里标志必须占用的屏幕尺寸达到了最好看的30％的工作。我打了四周，终于尝试这个代码，它迄今已为我工作：

img {
width:30%;
height:auto;
}

话虽这么说，这将改变所有的图片是屏幕尺寸的30％，在所有时间。为了解决这个问题，只是让一个类，并把它应用到你希望直接在30％的图像。下面是我写来完成这项对上述网站的代码示例：

CSS的部分：

.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}

的HTML部分：

<img src="logo_001_002.png" class="logo">

或者，你可以将你希望自动调整到它自己的股利和使用（需要时创建，现在类标签）上的每个DIV class标签选项以往的形象，但我觉得那会导致很多额外的工作，最终。但是，如果该网站会需要它：该网站会需要它。

希望这有助于。祝你有美好的一天！

Answer 4:

在所有浏览器下面的作品对我的200个的数字，对任何宽度的百分比 - 尽管是非法的。尤卡说：“反正可以使用它。” （类只是浮向左或向右的图像，并且将利润率。）我无法想象为什么这不是标准的做法！

<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />

改变窗口宽度和图像和顺缩放。

文章来源: Automatically resize images with browser size using CSS