CODEWITHSUNDEEP
csshtmlbootstrap-4
Vincent
Vincent

Reputation: 51

Image not responsive in Bootstrap 4

When I use the img tag with a width of 100% on a large screen, the image fits the screen but when the window is resized, there is a horizontal scroll, which shows white spaces and the image doesn’t fit again. All I just want is a fully responsive website but I do not just get it. Please, what do I do?

Upvotes: 5

Views: 9151

Answers (4)

samaspin
samaspin

Reputation: 2402

If you are using containers and rows then you might also need to contain the image within a div with a class of .col in order to get it to maintain its proportions as it scales, like this : 

<div class="container">
    <div class="row">
        <div class="col">
            <img class="img-fluid" src="my-image.jpg" />
        </div>
    </div>
</div>

note: the .col class is actually not required but I found it made things align the way I would expect when using containers and rows

Upvotes: 2

Nirav
Nirav

Reputation: 109

Use .img-fluid instead of .img-responsive class in Bootstrap 4. Example(Below):

<img class="img-fluid" src="your_image.jpg" alt="Image">

Upvotes: 0

Gayashan Perera
Gayashan Perera

Reputation: 671

use boostrap class

.img-fluid

or write style

max-width: 100%;
height: auto;

https://getbootstrap.com/docs/4.0/content/images/

Upvotes: 0

Seba L&#243;pez
Seba L&#243;pez

Reputation: 759

You need to add .img-fluid. From w3schools documentation:

Create responsive images by adding an .img-fluid class to the <img> tag

Upvotes: 4

Related Questions