Question

我将img标记定义为一些CSS为：

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

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

我错过了什么吗？冲突的风格定义？如果是的话我还没有找到它们。

TIA

Answer 1

您不必要地在文档中多次声明图像的宽度，并以错误的方式声明最大宽度。 Max-width应该定义图片的最大尺寸/边界（例如600px），如果你声明 max-width：100％和宽度：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;
}

Answer 3

请勿使用!important

让您的CSS更具体：

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

Answer 4

在style.css第116,212行和inuit.css第365行中。删除所有这些。

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

这就是你所需要的一切。

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

4 个答案: