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

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

在HTML中有一个标记。有些图像太大，需要调整大小以适应移动设备屏幕

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

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

但有些图像仍然具有宽度>屏幕大小

所以我试了一下：

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

但这样一来，每幅图片都将按比例全宽显示。小照片看起来太可怕了

我只想申请标签，该图像的大小大于屏幕的大小。

使用最大宽度而不是宽度

---

为那些你想要调整大小的图像设置一个classeg:myClass，并为其设置css

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

---

没有必要添加！重要，直到您要覆盖已有的css行。 所以代码是这样的

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

最大宽度：100vw；，加上你现在拥有的

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