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

Automatically Resize Images After Certain Width

本文关键字：调整 图像      更新时间：2023-11-06

所以我有一个网页，上面有一个横幅（1024像素），然后在下面的中心区域有一些图片。我正在使用CSS（或其他替代方案），如果浏览器中页面的大小小于最小横幅宽度，则开始自动向下调整所有图像（横幅和页面图标）的大小；如果大于此最小大小，则不会缩放任何图像（横幅在透明背景上，因此"可灵活调整大小"）。

这似乎是一个非常基本的问题，所以我怀疑它是否真的需要那么多，但我看到的所有其他参考文献都不适合我（我在CSS方面真的很无能）。如有任何建议，我们将不胜感激！

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

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

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

相关文章：