CSS如何自动调整宽度img标签

Question

我有一个HTML页面，我需要在客户端移动设备中显示。

在该HTML中有一个<img>标记。有些图片太大，需要调整移动设备屏幕的大小。

所以我试图像这样覆盖CSS：

#content img {
    width: 100%;
    height: auto  !important;;
}

但是有些图片仍有宽度＆gt;屏幕尺寸。

所以我尝试了这个：

#content img {
    width: 100% !important;
    height: auto  !important;;
}

但是这样，每张图片都会缩放全宽。 （小图片看起来很可怕）

我只想申请<img>代码，此图片的大小超过屏幕大小。

Answer 1

为那些要调整大小并为其设置css的图像设置一个类（例如：myClass）

 #content img.myClass{
    width: 100%;
    height: auto  !important;;
  }

Answer 2

在您要覆盖已存在的css行之前，不需要添加！重要。 所以代码就是这样，

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

Answer 3

使用max-width代替width。

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