@Danny13

Как сделать так, чтобы две fluid картинки в контейнере растягивались или уменьшались соответственно друг другу и всегда находились но одной высоте?

У использую materialize.css и у меня есть контейнер с 3 divs: текст, одна картинка и вторая. Картинки имеют класс responsive-img из materialize.css, что позволяет им растягиваться в соответствии с размерами экрана (они имеют max-width: 100% and height: auto). Вот собственно как это выглядит:
5ff734eeaccc3479222112.png

А вот здесь сам код с некоторым css.
<div class="container">
      <div class="row" style="display: flex; flex-wrap: wrap;">
        <div class="col s12 m6 l6" style="display: flex; flex-direction: column;">
          <p class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed orem ipsum dolor  consetetursit amet, sadipscing elitr, sed orem consetetur sadipscing elitr.
          </p>
          <p class="text2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed orem ipsum dolor  consetetursit amet, sadipscing elitr, sed orem consetetur sadipscing elitr.
          </p>
          <div>
          <img class="responsive-img" src="">
          </div>
        </div>
        <div class="col s12 m6 l6">
          <div>
          <img class="responsive-img" src="">
        </div>
        </div>
      </div>
    </div>


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

Пробовал задавать высоту в процентах, но никак не выходит, все криво.... Был бы благодарен за совет!
  • Вопрос задан
  • 41 просмотр
Пригласить эксперта
Ответы на вопрос 1
@r_g_b_a
Левой колонке display:flex;flex-direction:column. Картинке в ней flex-grow:1
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы