Как задать пропорциональное уменьшение такому блоку?

Question

[Overlord934]

может у кого то есть пример верстки такого блока?
html

<section class="rooms">
        <div class="container">
          <p class="rooms__subtitle">Our Room</p>
          <h2 class="rooms__title title">
            A World of <span class="orange-text">Choice</span>
          </h2>
          <p class="rooms__subtext subtext">
            Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
            sint. Velit officia consequat.
          </p>

          <div class="rooms__box">
            <div class="rooms__card rooms__card--one">
              <img class="rooms__card-img" src="images/room-1.jpg" alt="" />
              <p class="rooms__card-guests">3 GUESTS</p>
              <p class="rooms__card-text">Room with View</p>
            </div>
            <div class="rooms__card rooms__card--two">
              <img class="rooms__card-img" src="images/room-3.jpg" alt="" />
              <p class="rooms__card-guests">1 GUESTS</p>
              <p class="rooms__card-text">Luxury Room</p>
            </div>
            <div class="rooms__card rooms__card--three">
              <img class="rooms__card-img" src="images/room-4.jpg" alt="" />
              <p class="rooms__card-guests">6 GUESTS</p>
              <p class="rooms__card-text">Appartment</p>
            </div>
            <div class="rooms__card rooms__card--four">
              <img class="rooms__card-img" src="images/room-2.jpg" alt="" />
              <p class="rooms__card-guests">5 GUESTS</p>
              <p class="rooms__card-text">Small Room</p>
            </div>
            <div class="rooms__card rooms__card--five">
              <img class="rooms__card-img" src="images/room-5.jpg" alt="" />
              <p class="rooms__card-guests">4 GUESTS</p>
              <p class="rooms__card-text">Medium Room</p>
            </div>
          </div>
        </div>
      </section>

css

.rooms {
  margin-bottom: 100px;
}

.rooms__subtitle {
  margin: 0 auto 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: 31px;
  text-align: center;
}

.rooms__title {
  margin-bottom: 18px;
}

.rooms__subtext {
  margin-bottom: 45px;
}

.rooms__box {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 36px 40px;
}

.rooms__card {
  max-width: 100%;
  max-height: 100%;
}

.rooms__card img {
  max-width: 100%;
  max-height: 100%;
}

.rooms__card--two {
  grid-column: 2/3;
  grid-row: 1/3;
}

.rooms__card--five {
  grid-column: 3/4;
}

.rooms__card-img {
  margin-bottom: 18px;
}

.rooms__card-guests {
  font-size: 14px;
  line-height: 18px;
  opacity: 0.6;
  margin-bottom: 6px;
}

.rooms__card-text {
  font-size: 22px;
  font-weight: 600;
  line-height: 29px;
}

Нужно чтоб галерея уменьшалась пропорционально. В моей вертске выходит так, что при сужении ширины карточки с картинкой и инфой выглядят в разнобой вот так

Comments

[Максим]

Что такое aspect-ratio знаете?вот меняйте эту величину, уберите margin или используйте css переменные и в медиа запросе меняйте эти переменные..
Так же касается размера текста..
В мобиле блоки должны быть друг под другом, то есть столбиком но возможно два блока...

[Максим]

Наверно проще использовать в этом случае flexbox

[Максим]

Или применять трансформацию родителю в медиа запросе, если хотите сохранить положение блоков на мобилке

Answer 1

[Kentavr16]

Проблема в правильном описании высоты картинки. Вот пример. обрати внимание на .rooms__card-img . Я еще немного покрутил гап для того чтобы верстка стала на место, но это уже сам доставишь под свои нужды.

Comments

[Overlord934]

Тоже пришел к такому варианту, но происходит налезание картинки на текст.

[Kentavr16]

Overlord934, первое что приходит в голову - задать для карточки дисплей флекс и картинке поставить flex:1. То есть разметить текст а остальное картинка

[Overlord934]

Kentavr16, помогло, спасибо.

[Kentavr16]

Overlord934, Помогло - отметь решением.

[Overlord934]

Overlord934, не могли бы вы объяснить, по какой причине картинка налаживалась на текст и как нам помог flex? Чтоб глубже понять работу флексов. Что сделал понятно, а почему работает не понятно)

[Kentavr16]

Overlord934, если ранее мы задавали размер картинки в процентах - она реально становилась размером в родительский блок. При этом не учитывались остальные элементы, отсюда и наложение. Если бы не было флекса и нам нужно было решать этот вопрос, пришлось бы скорее всего проводить вычисления высот в стилях или подключать скрипты. Флекс же по своей природе призван решать такого рода проблемы с адаптивностью, являясь идеальным инструментом для выравнивания строк/колонок. Все его правила на это и ориентированы, собственно. Подробно в доках, пересказывать про оси и базовые линии смысла нет. в данном случае мы сказали флексу - вот два элемента, текст занимает вот столько, остальное оставь под картинку. Просто и эффективно.

[Overlord934]

Kentavr16, Все понял, благодарю за помощь