Адаптивные изображения встроенные

Question

Я пытаюсь поместить 2 изображения в одну строку, но с помощью начальной загрузки они остаются отзывчивыми.

Я пытался использовать

<img src="..." class="float-left" alt="...">
<img src="..." class="float-right" alt="...">

и держите их отзывчивыми с

<img src="..." class="img-fluid" alt="Responsive image">

но когда я пытаюсь смешать их, это не работает так:

<img src="..." class="img-fluid float-left"
<img src="..." class="img-fluid float-right"

<div class="allatok">
<img class="float-left" src="img/portfolio/labrador.png" alt="" style="height: 400px;">
<div class="papagaj">
<img class="float-right" src="img/portfolio/labrador.png" alt="" style="height: 400px;">
</div>
</div>

Проблема в том, что они вообще не реагируют.

Answer 1

Попробуйте просто поместить 2 изображения в div с классом d-flex, но каждое изображение также должно быть заключено в div.

Класс img-fluid дает max-width: 100% изображениям, поэтому, если вы не заключите их в дополнительный элемент div, они станут шире, чем вы хотите.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="imgwrap d-flex">
  <div>
    <img src="https://picsum.photos/id/1025/400" class="img-fluid" />
  </div>
  <div>
    <img src="https://picsum.photos/id/237/400" class="img-fluid" />
  </div>
</div>