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

【问题标题】：Automatically resize images with browser size using CSS使用 CSS 自动根据浏览器大小调整图像大小
【发布时间】：2013-04-19 12:01:58
【问题描述】：

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

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

【问题讨论】：

你的意思是响应 css 否则只是改变位置固定
How can I resize an image dynamically with CSS as the browser width/height changes?的可能重复

标签： css resize responsive-design

【解决方案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（这是我测试过的全部）。

【讨论】：

谢谢，但我已经这样做了（参见上面的代码），当我缩小浏览器窗口时，图像不会调整大小？
谢谢，这就是它的工作方式以及我发现的其他示例。我不知道为什么它不适用于我自己的测试 htm 页面...嗯
该代码对我不起作用，所以我将最大宽度更改为仅宽度，例如。 max-width: 100% 替换为 width: 100% ，这为我解决了。在 FF、Safari 和 Chrome 以及 Galaxy S4 FF 和默认浏览器上测试。
太棒了！我正在使用 Chrome，我需要更改宽度：auto\9;到宽度：自动；让它发挥作用。
@sircapsalot 看来您的 Jsfiddle 在 Firefox 35 上根本无法正常工作？

【解决方案2】：

图像容器

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

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

解决方案

使用以下方法之一：

使用% 值定义宽度和/或高度。
使用一系列@media 查询根据当前屏幕尺寸将宽度和高度设置为不同的值。

【讨论】：

谢谢。现在剩下的问题是，即使两个不同的图像在一个 div 容器中，这两个图像的缩放比例也不同？？
@Simon：图像的缩放基于它们的直接父容器。这两个图像具有不同的父容器。一个在#icons，另一个在#contact。 #contact 也必须按与 #icons 一致的方式进行缩放。
嗯，我有

但只有第二个 div当我调整大小时会调整大小，而第一个 div 只有在我调整窗口大小时才会调整大小。
@Simon：默认情况下，一个 div 有width: 100%;，除非它是浮动的或内联块。如果你想让一个浮动的 div 有width: 100%;，那么就没有理由浮动它。但也许你需要一个小于100% 的图像容器的宽度（其中一个或两个可以浮动），这取决于你想要做什么（我不知道它应该是什么样子）。

【解决方案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 上使用类标签选项（在需要时创建现在类标签），但我觉得这会导致很多额外的最终工作。但是，如果网站需要它：网站需要它。

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

【讨论】：

【解决方案4】：

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

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

更改窗口宽度，图像自动缩放。

【讨论】：