一定宽度后自动调整图像大小

Question

所以我有一个带有横幅（1024 像素）的网页，然后是下面中间区域的一些图片。如果浏览器中的页面尺寸小于最小横幅宽度并且大于此最小尺寸，我正在使用 CSS（或其他替代方法）开始自动向下调整所有图像（横幅和页面图标）的大小，没有任何图像被缩放（横幅位于透明背景上，因此它“流畅地调整大小”）。

这似乎是一个非常基本的问题，所以我怀疑它是否真的需要这么多，但我看到的所有其他参考资料都没有为我做这件事（而且我真的不擅长 CSS）。任何建议表示赞赏并提前感谢！

Answer 1

在您的 CSS 中使用媒体查询 - 如下所示：

@media screen and (max-width: 400px) {
  #container {
  width:320px;
  }
}
@media screen and (min-width: 401px) and (max-width: 900px) {
  #container {
  width:700px;
  }
}
@media screen and (min-width: 901px) {
  #container {
  width:900px;
  }
}

（您可以调整数字/括号）。

然后将图像宽度设置为容器的百分比。