Изображение не заполняет весь div

#html #css #twitter-bootstrap

Вопрос:

У меня есть div. Внутри него у меня есть образ. Размер изображения составляет 540*420. Я хочу, чтобы изображение полностью заполнило контейнер div, чего не происходит. Слева и справа от изображения находятся пробелы(обозначенные розовым цветом на изображении), которые я хочу удалить. Скриншот моего изображения-это:-

Мой 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>

Пожалуйста, помогите.

Ответ №1:

Вы используете классы col-md-6 и col-sm-6 . И эти классы содержат правила заполнения справа и слева 15 пикселей:

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

Используйте width: 100% , height: 100% и object-fit: cover для img тега просто переопределите padding правила, добавив padding: 0 стили div .

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/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>