CODEWITHSUNDEEP
htmlcssbootstrap-4
ganjaam
ganjaam

Reputation: 1286

Image not fully responsive despite of using 'img-fluid' class

I used img-fluid class inside my img tag but my image is not fully responsive. It is responsive for smaller screen but becomes unresponsive after the screen is enlarged to a certain dimension.

I've read How to make an image responsive using bootstrap without having it take up the entire width of the division? and Bootstrap: img-responsive vs img-fluid but couldn't solve the issue.

Here's how I tried

HTML:

    <!-- THE HEADER -->
    <div class="container-fluid header">
        AUST CSE
    </div>
    <!-- IMAGE JUST BELOW HEADER -->
    <div class="wrapper" style="background: blue">
        <img src="images2/banner.jpg" class="img-fluid">
    </div>

CSS:

    .wrapper {
        width: 100%;
    }

In smaller screens, the page looks like this: enter image description here however, in larger screen, the image don't occupy 100% of the space and looks like this: enter image description here I want the image to occupy 100% of the width and scale up its height, just like it does when the screen is smaller.

Upvotes: 1

Views: 4313

Answers (2)

hungerstar
hungerstar

Reputation: 21685

img-fluid uses max-width: 100%;. Once the containing element is the same size or larger than the image's width, it will stop resizing.

Two options:

1) Use an image with a resolution that is at least the widest width of your container element. If the width of your container element does not have a fixed top end (i.e. will always be 80% of viewport width), then pick a sufficiently large image so that it will look good on the majority of displays (lookup stats on most common browser resolutions).

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1000">
      </div>
    </div>
    <div class="col-md-8">
      <p>
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      </p>
  </div>
</div>

2) Override .img-fluid so that the image will resize beyond native resolution. The drawback here is the image will get grainy. The smaller the native resolution, the more grainy it will become when scaled to large areas. You can see in my example that the text is quite fuzzy.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

/* Will override all instances of .img-fluid. */
.img-fluid {
  width: 100%;
}
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/100x100">
      </div>
    </div>
    <div class="col-md-8">
      <p>
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      </p>
    </div>
  </div>
</div>

I've also included a scoping example below which allows you to override only specific images to extend past their native resolution. 

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

/* Scoped so that we can target specific images. */
.img-fluid.img-full-width {
  width: 100%;
}
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid img-full-width" src="https://via.placeholder.com/100x100">
      </div>
    </div>
    <div class="col-md-8">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Hunter Turner
Hunter Turner

Reputation: 6894

If you want the image to span all the way across the width of the page on larger screens, then you need to make sure that your image width is just as large as the screen width.

Based off of your issue, it looks like your dimensions are not large enough. The img-fluid class will resize your image, but only to the max of its dimensions.

There are 1 of 2 things you can do to fix it.

  1. (The preferred method) Pick an image that has the correct width for the max size screen you want. (Most of the time, that would be 1920px)

  2. You can add width: 100% to your image so that it will span the full width of your page. But, if the width of your image is smaller than your screen, then the image will not be as clear, which is why it's best to use images that are the correct dimensions.

Example:

  • Here is an image that has smaller dimensions (your issue): JSFiddle

.container {
  border: 2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Image</h2>
  <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-fluid" src="https://cdn-static.denofgeek.com/sites/denofgeek/files/styles/main_wide/public/2015/11/main_0.jpg?itok=k1tyTR75" alt="HL2"> 
</div>

  • Here is an image that has larger dimensions (1920px): JSFiddle

.container {
  border: 2px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Image</h2>
  <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-fluid" src="https://s.aolcdn.com/hss/storage/midas/f8eff2a90708d58814bb4adc93634cbb/205752037/half-life-2-15622-1920x1080.jpg" alt="HL2"> 
</div>

Upvotes: 1

Related Questions