所有浏览器的 CSS 中的图像自动宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7519080/
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
Image auto width in CSS for all browsers?
提问by Keith Barrows
I have my imgtag defined with some CSS as:
我img用一些 CSS将我的标签定义为：
img
{
width: auto !important;
height: auto !important;
max-width: 100%;
}
It works just fine in some of the Mobile Browsers I have tried, as well as Google Chrome on a desktop. However, it does not seem to work in IE or FireFox. By that, I mean, as you resize the window. Take a look at a sandbox site I am working on: http://terraninstitute.com. I have the image on the home page intentionally set to be a huge picture. Also navigate to the Information (main menu) then Newcomers (side menu) and notice the map image at the bottom. On my Droid (and a few other devices I can get my hands on) as well as in Google Chrome this looks pretty good. In IE and FireFox, not so much.
它在我尝试过的一些移动浏览器以及桌面上的谷歌浏览器中运行良好。但是，它似乎不适用于 IE 或 FireFox。我的意思是，当您调整窗口大小时。看看我正在开发的沙盒站点：http: //terraninstitute.com。我有意将主页上的图像设置为大图。同时导航到信息（主菜单）然后新人（侧菜单）并注意底部的地图图像。在我的 Droid（以及我可以使用的其他一些设备）以及 Google Chrome 中，这看起来很不错。在 IE 和 FireFox 中，没有那么多。
Am I missing something? Conflicting style definitions? I am not finding them as of yet if it is.
我错过了什么吗？风格定义冲突？我还没有找到它们，如果是的话。
TIA
TIA
回答by Andres Ilich
You're declaring the width of your images multiple times in your document unnecessarily and declaring a max-width the wrong way. Max-widthis supposed to define a max size/boundary for your images (600px, for example), if you declare max-width:100%in conjunction with width:100%, you're not really doing anything with that declaration as the images will expand 100% as it is.
您不必要地在文档中多次声明图像的宽度，并以错误的方式声明了最大宽度。Max-width应该为您的图像定义最大尺寸/边界（例如 600px），如果您将max-width:100%与width:100%一起声明，那么您实际上并没有用该声明做任何事情，因为图像将按原样扩展 100%。
Remove the width declarations from your CSS in the following lines:
在以下几行中从 CSS 中删除宽度声明：
line 116: delete the imgdeclaration all together, it is not needed.
第 116 行：img一起删除声明，不需要。
line 365: remove the max-width:100%and height:auto;attribute as they are not needed (and if you can delete the declaration all together as you can declare that elsewhere)
第 365 行：删除max-width:100%andheight:auto;属性，因为它们不需要（如果您可以一起删除声明，因为您可以在其他地方声明）
line 121: Now just stick with this one and just add the following:
第 121 行：现在坚持使用这个并添加以下内容：
img {
height: auto;
width:100%;
}
回答by beytarovski
Bootstrapsolution for responsive images:
响应式图像的Bootstrap解决方案：
img {
/* Responsive images (ensure images don't scale beyond their parents) */
/* Part 1: Set a maxium relative to the parent */
max-width: 100%;
/* IE7-8 need help adjusting responsive images */
width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
回答by Diodeus - James MacFarlane
Don't use !important
不要使用 !important
Make your CSS more speficic:
使您的 CSS 更加具体：
body img {
width: auto;
height: auto;
max-width: 100%;
}
回答by Bala
in style.css line line 116, 212 and in inuit.css line 365. Remove all those.
在 style.css 第 116、212 行和 inuit.css 第 365 行中。删除所有这些。
img{
height: auto;
max-width: 100%;
}
Thats all you need.
这就是你所需要的。
