CSS中的图像自动宽度适用于所有浏览器？

Question

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

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

它在我尝试的一些移动浏览器以及桌面上的谷歌浏览器中运行良好.但是,它似乎不适用于IE或FireFox.我的意思是,当你调整窗口大小时.看看我正在研究的沙箱网站:http: //terraninstitute.com.我有意将主页上的图像设置为一幅巨幅图片.还可以导航到信息(主菜单),然后导航到新手(侧面菜单)并注意底部的地图图像.在我的Droid(以及其他一些我能掌握的设备)以及谷歌浏览器中,这看起来非常不错.在IE和FireFox中,并非如此.

我错过了什么吗？冲突的风格定义？如果是的话,我还没有发现它们.

TIA

Answer 1

您不必要地在文档中多次声明图像的宽度,并以错误的方式声明最大宽度.Max-width应该为你的图像定义一个最大尺寸/边界(例如600px),如果你声明max-width:100%和width:100%,你实际上并没有对这个声明做任何事情,因为图像会尽可能扩大100%.

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

第116行:img一起删除声明,不需要.

行365:删除max-width:100%并height:auto;为他们不需要的属性(如果你能删除声明都在一起,你可以声明其他地方)

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

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

Answer 2

响应式图像的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\9;

  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  height: auto;

  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}