Question

我已经看到了几个使用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;
}

Answer 1

使用此功能，但图像的一部分将隐藏在顶部和底部。

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

Answer 2

尝试以下代码。希望对您有用。

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

Answer 3

我已经修改了您的代码。希望这对您有用。

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 个答案: