使用 CSS 自动调整浏览器大小的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16217355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatically resize images with browser size using CSS
提问by sigug
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 divelements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like coveris doing for the background)?
在调整浏览器窗口大小时，我如何基本上拥有全屏设计（使用background-size: cover）并让div元素处于完全相同的位置（明智的百分比），并且它们的大小也调整大小（就像cover背景一样）？
回答by Curtis Crewe
To make the images flexible, simply add
max-width:100%andheight:auto. Imagemax-width:100%andheight:autoworks in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to addwidth:auto\9for IE8.source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
要使图像灵活，只需添加
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
for example :
例如 ：
img {
max-width: 100%;
height: auto;
width: auto; /* 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（这是我测试过的所有版本）。
回答by Matt Coughlin
image container
图像容器
Scaling images using the above trick only works if the container the images are in changes size.
使用上述技巧缩放图像仅在图像所在的容器更改大小时才有效。
The #iconscontainer uses pxvalues for the width and height. pxvalues don't scale when the browser is resized.
该#icons容器使用px的宽度和高度值。px调整浏览器大小时，值不会缩放。
Solutions
解决方案
Use one of the following approaches:
使用以下方法之一：
- Define the width and/or height using
%values. - Use a series of
@mediaqueries to set the width and height to different values based on the current screen size.
- 使用
%值定义宽度和/或高度。 - 使用一系列
@media查询根据当前屏幕大小将宽度和高度设置为不同的值。
回答by Chad
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:
这可能是一个过于简单的答案（我在这里还是个新手），但是我过去为解决这种情况所做的工作是计算出我希望图像占据的屏幕百分比。例如，我正在处理一个网页，其中徽标必须占屏幕尺寸的 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 上使用类标记选项（在需要时立即创建类标记），但我觉得这最终会导致大量额外的工作。但是，如果站点需要它：站点需要它。
Hopefully this helps. Have a great day!
希望这会有所帮助。祝你有美好的一天！
回答by Ferren
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.
随意更改窗口宽度和图像缩放比例。
