Изменение размера блоков на флексах

18 апреля 2021, 12:30

Имеется проект https://mihinov.github.io/
При уменьшении окна я планировал, что блок .half__row с двумя img будет сужаться, но на картинке ниже, видно, что ничего не происходит, я пробовал добавлять .half__row значения max-width: 100%; и height: auto;, но всё равно ничего не уменьшается правильно.

Также, при уменьшении всё сужается по первой картинке в блоке .half__row, как будто только первую картинку видит браузер.

Answer 1

Оберните ваши картинки в div или пропишите правильные стили для картинок.

.container { 
  max-width: 700px; 
  width: 100%; 
  margin: auto; 
} 
.row { 
  width: 100%; 
  display: flex; 
} 
.row + .row { 
  margin-top: 25px; 
} 
img { 
  max-width: 100%; 
  width: auto; 
  height: auto; 
}

<div class="container"> 
  <div class="row"> 
  <img src="https://via.placeholder.com/450x200"> 
  <img src="https://via.placeholder.com/250x200"> 
  </div> 
  <div class="row"> 
    <div><img src="https://via.placeholder.com/450x200"></div> 
    <div><img src="https://via.placeholder.com/250x200"></div> 
  </div> 
</div>