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

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

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

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

1 个答案: