使横幅图像与视口中的可用空间成比例缩放

Question

我有900px宽度和150px高度的横幅，如果我使用谷歌浏览器使屏幕小于900px，我希望它自动调整，比如按比例缩放。 这是我正在使用的代码：

<meta name="viewport" content="width=device-width, initial-scale=1"> .........some other code......

.banner {
  background: silver;
  padding: 20px 0;
  max-width: 100%;
  overflow: auto;
}

实现我所寻求的目标会有什么建议？

Answer 1

它现在做了什么？

尝试：宽度：100％;最大宽度：900px

Answer 2

考虑下面演示的代码。最初横幅设置为900px和高度的宽度（您可以根据需要调整它）。当屏幕大小达到900px时，您可以使用百分比（％）或vw（视图宽度）的相对值更改横幅的宽度，如下所示。希望能帮助到你。 示例代码如下：

#banner{
width:900px;
}
@media only screen and (max-width: 900px) {
  #banner {
    width: 90%;
  }
}

<img id="banner" src="https://d33wubrfki0l68.cloudfront.net/557d279498d303f3206fae0af97a62f3625ebf4e/c3c0d/images/header/leargas-banner-900px.png"/>

Answer 3

我的问题是我只是指.banner，说明中不清楚。 我写的时候 .banner img {max-width: 100%}它有效。并在overflow中删除了maxwidth .banner。