使用CSS自动调整图像大小

I want all (or just some) of my images getting resized automatically when I resize my browser window. I've found the following code - it doesn't do anything though.

我希望当我调整浏览器窗口的大小时，我的所有(或部分)图像都能自动调整大小。我找到了下面的代码——它什么都不做。

HTML

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

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; 
}

How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?

如何在调整浏览器窗口大小时，让div元素完全位于相同的位置(% wise)，而它们的大小也在调整(就像cover处理背景)?

4 个解决方案

#1

124

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

要使图像灵活，只需添加最大宽度:100%和高度:自动。图片最大宽度:100%和高度:自动在IE7中工作，但在IE8中不工作(是的，另一个奇怪的IE bug)。要解决这个问题，您需要为IE8添加宽度:auto\9。

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

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

for example :

例如:

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

and then any images you add simply using the img tag will be flexible

然后，只要使用img标签就可以添加任何图片

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).

JSFiddle例子。不需要JavaScript。适用于最新版本的Chrome, Firefox和IE(这是我测试过的)。

#2

image container

图像容器

Scaling images using the above trick only works if the container the images are in changes size.

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

The #icons container uses px values for the width and height. px values don't scale when the browser is resized.

#图标容器使用px值表示宽度和高度。当浏览器被调整大小时，px值不会缩放。

Solutions

解决方案

Use one of the following approaches:

使用以下方法之一:

Define the width and/or height using % values.
使用%值定义宽度和/或高度。
Use a series of @media queries to set the width and height to different values based on the current screen size.
使用一系列@media查询来设置基于当前屏幕大小的不同值的宽度和高度。

#3

This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:

这可能是一个过于简单的答案(我在这里仍然是新手)，但是我过去为解决这种情况所做的是计算出我希望图像占屏幕的百分比。例如，有一个我正在做的网页，它的logo必须占到屏幕尺寸的30%才能看起来最好。我尝试了一下，最后尝试了这个代码，到目前为止，它对我起了作用:

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

That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:

也就是说，这将使你所有的图像在任何时候都是屏幕大小的30%。要解决这个问题，只需将其创建为一个类，并将其应用到您希望直接达到30%的映像中。下面是我在上面提到的网站上写的代码示例:

the CSS portion:

CSS部分:

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

the HTML portion:

HTML部分:

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

Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.

或者，您可以将希望自动调整大小的图像放置到一个div中，并在每个div中使用class标记选项(在需要时创建类标记)，但是我认为这最终会导致很多额外的工作。但是，如果网站需要它:网站需要它。

Hopefully this helps. Have a great day!

希望这可以帮助。祝你有美好的一天!

#4

The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!

以下是我的200个数字的所有浏览器的工作，尽管它是非法的，但它的宽度百分比。Jukka说，不管怎样都要用它。(类只是浮动图像左或右，并设置边缘。)我无法想象为什么这不是标准的方法!

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

Change the window width and the image scales obligingly.

修改窗口的宽度和图像的比例。

#1

124

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

要使图像灵活，只需添加最大宽度:100%和高度:自动。图片最大宽度:100%和高度:自动在IE7中工作，但在IE8中不工作(是的，另一个奇怪的IE bug)。要解决这个问题，您需要为IE8添加宽度:auto\9。

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

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