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

Question

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

87

当我调整浏览器窗口大小时，我希望所有（或部分）图片都能自动缩放大小。

我找到了以下代码 - 但它似乎没有起作用。

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)?

- sigug

你是不是想说响应式CSS，否则就把position改为fixed？ - Mayur Patel

1

可能是重复的问题，参考如何使用CSS动态调整图像大小以响应浏览器宽度/高度变化？。 - tjati

4个回答

5

图像容器

使用上述技巧对图像进行缩放仅在包含图像的容器改变大小时起作用。

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

解决方案

使用以下方法之一：

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

- Matt Coughlin

谢谢。现在剩下的问题是，即使两个不同的图像在一个div容器中，这两个图像缩放的方式也不同？ - sigug

@Simon：图像的缩放基于它们的直接父容器。这2个图像具有不同的父容器。一个在#icons中，另一个在#contact中。#contact也必须以与#icons一致的方式进行缩放。 - Matt Coughlin

哦，我有<div id="icons"> <div style="float: left; width: 100%;"><img src="img/icon_contact.png" alt="" /></div> <div style="width: 100%;"><img src="img/icon_links.png" alt="" /></div></div>但只有第二个div在调整大小时得到正确的调整，而第一个div只有在我将窗口调整得更大时才会得到调整。 - sigug

@Simon：默认情况下，一个 div 的宽度为 width: 100%;，除非它被浮动或设置为 inline-block。如果你想让一个浮动的 div 具有 width: 100%;，那么没有必要将其浮动。但也许你需要一个比图像容器小的宽度（其中一个或两个可能被浮动），这取决于你想要实现什么效果（我不知道它应该是什么样子）。 - Matt Coughlin

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标记），但我觉得这最终会导致很多额外的工作。但是，如果网站需要：网站需要。

希望这可以帮助您。祝您有美好的一天！

- Chad

-1

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

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

调整窗口宽度和图像比例以适应需要。

- Ferren

类定义在哪里？ - rmcsharry

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Curtis Crewe · Accepted Answer

为了使图像具有灵活性，只需添加max-width:100%和height:auto。在IE7中，图像max-width:100%和height:auto有效，但在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（这是我测试过的所有版本）。