Html 调整布局图像和大小

我试图根据页面大小调整图像和大小，使其不超出网格，但我做不到

我试着在CSS中添加下面的这些行，但是其他的图片都被窃听了

img{
宽度：100%；
最大宽度：800px；
}

内容应该调整图像的大小，但它不起作用

超出网格的图像：

---

您可以看到实时预览

执行与您完全相反的操作

img{
宽度：800px；/*这是可选的*/
最大宽度：100%；
}

OP评论：

我已经把它扔了（宽度：800px），但它弄乱了右边栏的图像

---

然后创建一个类，比如

img resposive

，并为该类应用

max width:100%

。在你想要/需要的图像中使用该类

我建议如果你正在尝试响应式设计，请使用

50em而不是
800px

它们都是相等的（窗口调整大小时除外）。
只需将图像的最大宽度设置为100%

img {
  max-width: 100%;
}

它将开始与其他图像混淆，例如，网格仍有bug。@vankk删除
宽度：800px
，我在回答中说这是可选的。我已经删除了它，但它与右侧栏的图像混淆。@vankk然后创建一个类，如
img resposive
，并为该类应用
最大宽度：100%
。在你想要的图像中使用这个类，我试过了，但没有成功。你可以现场查看，也可以查看我上面提到的链接中的网格，你知道为什么会这样吗？