如何使图像宽度随页面宽度自动缩放[重复]答案

【问题标题】：How to Make Image Width Auto Scale with Page Width [duplicate]如何使图像宽度随页面宽度自动缩放[重复]
【发布时间】：2019-02-25 10:45:12
【问题描述】：

我见过几个使用max-width: 100%; 和height: auto; 的例子，但这些都不起作用。我正在尝试在引导程序 4 中的 section 中放置一个图像。该图像要么不成比例，要么太大，并且在页面宽度发生变化时不会改变。

请注意，我的图像是 1800px * 900px，我正在尝试将横幅的宽度设置为页面宽度，并相应调整高度。

HTML

<!-- Image Section -->
<section class="banner-cube">
  <div class="container">
    <br>  
    <div>
      <h3>Image Banner</h3>
    </div>
    <br>
  </div>
</section>

CSS

.banner-cube {
  background: url("../imagery/cubebanner.png");
  max-width: 100%; 
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
}

【问题讨论】：

您使用的是背景图像而不是 img 标签。最大宽度：100%；和高度：自动；只为 img 工作。您需要在 .banner-cube 上设置一个高度 - 这可能是相对于宽度或窗口的大小，也可以使用 background-size: cover 以允许背景适合父项
请尝试使用 "background-size: 100%" 在那里你可以设置两个值 1 宽度和第二个高度。
请试试这个 .banner-cube { background: url("../imagery/cubebanner.png");背景尺寸：100%；高度：自动；背景位置：中心中心；背景重复：不重复；宽度：100%； }

标签： html css twitter-bootstrap image bootstrap-4

【解决方案1】：

试试下面的代码。希望对你有用。

.banner-cube{
  background-image: url("../imagery/cubebanner.png");
  position: relative;
  background-size: cover;
}

【讨论】：

【解决方案2】：

我修改了你的代码。希望这对你有用。

HTML

 <section class="banner-cube">
      <div class="bannerimage"></div>
      <div class="bannerdata">
          <div class="container">
          <h3>Image Banner</h3>
        </div>
      </div>
      </div>
    </section>

CSS

.banner-cube{width: 100%; position: relative;}
.bannerimage{
  background-image: url("../imagery/cubebanner.png"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top:50%;
  width: 100%;
}
.bannerdata{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

【讨论】：

【解决方案3】：

使用这个，但部分图像将隐藏在顶部和底部。

.banner-cube {
  background: url("../imagery/cubebanner.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：