调整布局图像和大小

Question

我正在尝试根据页面大小调整图像和大小，但不会超出网格，但我无法实现。

我尝试在CSS中添加下面的这些行，但它会窃听其他图像

img{
    width: 100%;
    max-width: 800px;
}

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

图像走出网格：

您可以看到实时预览here

Answer 1

做正好相反的事情

img {
  width:800px; /* this is optional */
  max-width: 100%;
}

OP的评论：

  

我已经放弃了它（width:800px)，但是它与右侧边栏中的图像相混淆。

然后创建类似img-resposive的类，并为该类应用max-width: 100%。并在您想要/需要的图像中使用该类

Answer 2

只需将图片的最大宽度设为100％

img {
  max-width: 100%;
}

Answer 3

我建议您尝试自适应设计时，请使用50em;代替800px

它们都是相等的（除非调整窗口大小。）