I gave class "img-fluid" to my image but it doesn’t fit the screen

Question

I gave my image class "img-fluid" in Bootstrap but it doesn’t fit my web page what should I do?

    <img src="images\406201.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="images\twitter-logo.png"
                    class="bg-light" alt="..."></a>
            <a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
                    src="images\instagram-logo-png-transparent-0.png" class="bg-light" alt=""></a>
            <a href="#"><img style="width: 65px; margin: 2px;border-radius: 5px;"
                    src="images\telegram-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.

Put a more complete code. Bootstrap classes are highly dependent on their parents — Sajjad Aemmi, Jan 30 '22 at 11:40
Inspect Element - Play with the CSS rules. Than when you cannot fix it explain: 1: What have you tried, 2: what is needed, 3: what it actually does — Roko C. Buljan, Jan 30 '22 at 11:46
if you want fit your image please check [this](https://stackoverflow.com/a/14696457/1075028). — 8611670474, Jan 30 '22 at 13:22

score 0 · Answer 1 · answered Jan 30 '22 at 12:47

0

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 a div, 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 size

answered Jan 30 '22 at 12:47

redystum

352
3
10

yeah I didn’t put the img tag in other tag like div You can see my code obviously, my first pic just exactly fitted my web screen but this one didn’t – Mehran Jan 30 '22 at 13:03
sorry, but the code you posted above works for me (at least I think this is what you want) [image](https://ibb.co/72MhBnV) (ignore the random images I have used) – redystum Jan 30 '22 at 13:15

score 0 · Answer 2 · answered Feb 05 '22 at 11:40

0

Put the image in a div with class "container-fluid".

<style>
    .width-complete{
        width:100%
    }
</style>
<div class="container-fluid">
    <img src="images\406201.jpg" class="width-complete" alt="...">
</div>

answered Feb 05 '22 at 11:40

Kartik Verma

34
5

I gave class "img-fluid" to my image but it doesn’t fit the screen

2 Answers2