70

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

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

4

4 回答 4

154

要使图像灵活，只需添加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（这是我测试过的全部）。

于 2013-04-25T14:25:05.620 回答
4

图像容器

仅当图像所在的容器大小发生变化时，使用上述技巧缩放图像才有效。

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

解决方案

使用以下方法之一：

  1. 使用值定义宽度和/或高度%。
  2. 使用一系列@media查询根据当前屏幕大小将宽度和高度设置为不同的值。
于 2013-04-25T14:41:49.140 回答
1

这可能是一个过于简单的答案（我在这里还是新手），但我过去为解决这种情况所做的工作是计算出我希望图像占据的屏幕百分比。例如，我正在处理一个网页，其中徽标必须占据屏幕大小的 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 标签选项（在需要时创建现在的 class 标签），但我觉得这最终会导致很多额外的工作。但是，如果站点需要它：站点需要它。

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

于 2015-11-15T14:26:25.730 回答
0

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

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

更改窗口宽度和图像缩放。

于 2017-07-12T18:21:25.467 回答