How to Make Image Width Auto Scale with Page Width

Question

I've seen several examples of using max-width: 100%; and height: auto; but these are not working. I am trying to place an image within a section in bootstrap 4. The image is either disproportioned, too big, and does not change when the page width changes.

Note that my image is 1800px * 900px and I am trying to make the width of the banner to be the page width and the height to adjust accordingly.

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

You are using a background-image and not `img` tag. max-width: 100%; and height: auto; only work for img. You need to set a height on `.banner-cube` - this could be a relative size to width or window and also use `background-size: cover` to allow background to fit parent — itodd, Sep 21 '18 at 04:42
Please try using "background-size: 100%" there in you can set two value 1 for width and second one for height. — Khunti Haresh, Sep 21 '18 at 04:50
Please try this .banner-cube { background: url("../imagery/cubebanner.png"); background-size: 100%; height: auto; background-position: center center; background-repeat: no-repeat; width:100%; } — Varsha Dhadge, Sep 21 '18 at 06:56

score 0 · Answer 1 · answered Sep 21 '18 at 04:54

use this but part of image will be hide in the top and bottom.

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

score 0 · Answer 2 · edited Sep 21 '18 at 07:49

0

Try below code. Hope that works for you.

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

edited Sep 21 '18 at 07:49

Varsha Dhadge

1,711
14
23

answered Sep 21 '18 at 05:14

Satish Deokar

201
1
9

score 0 · Answer 3 · answered Sep 21 '18 at 06:49

I have modified your code. Hope this will works for you.

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

How to Make Image Width Auto Scale with Page Width

3 Answers3