Блог

Главная - Вопросы по программированию - Как сделать так, чтобы какое-то изображение соответствовало столбцам начальной загрузки с автоматическим увеличением изображения для заполнения столбца

Как сделать так, чтобы какое-то изображение соответствовало столбцам начальной загрузки с автоматическим увеличением изображения для заполнения столбца

#html #css #image #bootstrap-5

Вопрос:

Изображение подходит и заполняет столбец с увеличением

Это картинка, когда она открыта в мобильном телефоне, и я хочу быть таким

Это результат, когда я пытаюсь соответствовать 100%

И это мой код :

 <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="xon-card">
            <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/9/6/960x500_3_.jpg" alt="">
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
          <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/m/e/mermaid--teaser-update-5.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

После этого я хочу сделать какую-нибудь такую кнопку

Я использую bootstrap 5.

Ответ №1:

добавьте стиль в img:

 width: 100%;
height: 100%;
object-fit: cover;

Комментарии:

1. Спасибо, что я это сделал 🙂

Ответ №2:

Я думаю, ты справишься с этим сама flex-wrap . Смотрите ссылку ниже.

https://getbootstrap.com/docs/4.0/utilities/flex/#wrap

Метки: ,