CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
gomesh munda
gomesh munda

Reputation: 850

Image not filling the entire div

I have a div. Inside it, I have an image. The dimension of the image is 540*420. I want the image to completely fill the container div, which is not happening. On the left and right of the image are whitespaces(denoted by pink colour in the image) which I want to remove. Screenshot of my image is:-

enter image description here

My HTML:

<div class="col-md-6 col-sm-6" style="background-color: pink; height: 270px; position: relative; background-size: cover;">
    <img src="images/about.jpg" style="max-width: 100%; max-height: 100%; object-fit: contain;" />
    <div style="position: absolute; top: 19%; left: 13%; width: 80%;">
        <p style="font-size: 1.4em; color: #fff; margin: 0; line-height: 1.7em; font-weight: 300; text-transform: uppercase;">
            apple pay runs afoul of mcx, a group with a rival product.
        </p>
    </div>
</div>

Please help.

Upvotes: 1

Views: 1553

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

You are using classes col-md-6 and col-sm-6. And these classes contain 15px right and left padding rules:

padding-right: 15px;
padding-left: 15px;

Use width: 100%, height: 100% and object-fit: cover for the img tag, just override padding rules by adding padding: 0 in the styles of div.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="col-md-6 col-sm-6" style="background-color: pink; height: 270px; position: relative; background-size: cover; padding: 0;">
    <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" style="width: 100%; height: 100%; object-fit: cover;" />
    <div style="position: absolute; top: 19%; left: 13%; width: 80%;">
        <p style="font-size: 1.4em; color: #fff; margin: 0; line-height: 1.7em; font-weight: 300; text-transform: uppercase;">
            apple pay runs afoul of mcx, a group with a rival product.
        </p>
    </div>
</div>

Upvotes: 1

Related Questions