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

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;
  }
}

(您可以调整数字/括号)。

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