Question

当我调整浏览器窗口大小时，我希望所有（或只是部分）图像自动调整大小。我发现了以下代码 - 但它没有做任何事情。

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漏洞）。要解决这个问题，你需要   为IE8添加width:auto\9。

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

例如：

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

然后您使用img标签添加的任何图片都将灵活

JSFiddle example here.无需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并在每个div上使用class tag选项（在需要时立即创建类标记），但我觉得这会导致很多额外的最终工作。但是，如果网站要求它：网站要求它。

希望这会有所帮助。祝你有美好的一天！

Answer 4

以下适用于我的200个数字的所有浏览器，任何宽度百分比 - 尽管是非法的。 Jukka说'无论如何都要用它'。（该类只是向左或向右浮动图像并设置边距。）我无法想象为什么这不是标准方法！

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

更改窗口宽度和图像比例。

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

4 个答案: