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?
Image not responsive in Bootstrap 4
Viewed 8183
4 Answers
You need to add .img-fluid. From w3schools documentation:
Create responsive images by adding an .img-fluid class to the <img> tag
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
use boostrap class
.img-fluid
or write style
max-width: 100%;
height: auto;
Use .img-fluid instead of .img-responsive class in Bootstrap 4. Example(Below):
<img class="img-fluid" src="your_image.jpg" alt="Image">
Related