css - 所有浏览器的 CSS 图像自动宽度？

Question

我用一些 CSS 定义了我的 img 标签:

img
{
  width: auto !important;
  height: auto !important;
  max-width: 100%;
}

它在我尝试过的一些移动浏览器以及桌面版 Google Chrome 中运行良好。但是，它似乎在 IE 或 FireFox 中不起作用。我的意思是，当您调整窗口大小时。看看我正在处理的沙盒网站:http://terraninstitute.com .我有意将主页上的图像设置为一张巨大的图片。同时导航到信息(主菜单)，然后导航到新手(侧菜单)，并注意底部的 map 图像。在我的 Droid(以及其他一些我可以接触到的设备)和 Google Chrome 中，这看起来很不错。在 IE 和 FireFox 中，不是那么多。

我错过了什么吗？冲突的样式定义？如果是的话，我目前还没有找到它们。

TIA

Answer 1

您不必要地在文档中多次声明了图像的宽度，并且以错误的方式声明了最大宽度。 Max-width 应该定义图像的最大尺寸/边界(例如 600 像素)，如果您声明 ma​​x-width:100% 与 width:100%，你实际上并没有对该声明做任何事情，因为图像将按原样扩展 100%。

在以下几行中从您的 CSS 中删除宽度声明:

第116行:将img声明一并删除，不需要了。

第 365 行:删除 max-width:100% 和 height:auto; 属性，因为它们不是必需的(如果您可以将声明一起删除为你可以在别处声明)

第 121 行:现在只需坚持这一行并添加以下内容:

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