I gave my image class "img-fluid" in Bootstrap but it doesn’t fit my web page what should I do?
<img src="images406201.jpg" class="img-fluid" alt="...">
<div style="margin-top: 0px ;margin-left: 12px; width: 98.4%;" class="footer bg-dark text-light p-5">
<h3 style="text-align: center;">follow Us</h3>
<div class="d-flex justify-content-center flex-wrap">
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="images/facebook-logo.png"
class="bg-light" alt="..."></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;" src="imagestwitter-logo.png"
class="bg-light" alt="..."></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
src="imagesinstagram-logo-png-transparent-0.png" class="bg-light" alt=""></a>
<a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
src="imagestelegram-logo-png-0.png" class="bg-light" alt=""></a>
</div>
<h4 style="text-align: center; margin-top: 15px;">Powered by Marvel Studious</h4>
</div>
When I give it style="width=100%" it works but the problem is it doesn’t need CSS.
2
Answers
I’m not sure if this is the problem, but
img-fluid
puts the image in the maximum size possible given where it is, for example, if it is inside adiv
, the image will be the size of the div and not the screen, so make sure you don’t have the image inside something that is limiting its sizePut the image in a div with class "container-fluid".