0

интересует следующий вопрос.

Блоку задано соотношение сторон(aspect-ratio: 1 / 2) и вышина(height: 100vh). Соответственно вышина явно задана, ширина блока формируется из соотношение сторон. Но в случае если ширина блока начнет превышать ширину viewport, нужно что бы уже вышина блока начало формироваться из соотношение сторон, а ширина блока была 100vw.

Видео как должен ресайзится div - https://skrinshoter.ru/vLLp07shdsn?a

Можно ли такое сделать на нативнов CSS, без JavaScript?

1 ответ 1

0

Попробуйте ограничить блок по ширине и высоте (max-width и max-height)

js для наглядности соблюдения соотношения сторон

window.addEventListener("resize", (event) => {
      const div = document.getElementById('div');
      const clientRect = div.getBoundingClientRect();
      const width = clientRect.width.toFixed(1);
      const height = clientRect.height.toFixed(1);
      div.innerText = `${width}px / ${height}px = ${(width / height).toFixed(1)}`
    });
body {
  margin: 0;
  padding: 5vh 5vw;
}
.wrap {
  aspect-ratio: 16/9;
  max-height: 90vh;
  max-width: 90vw;

  border: 4px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
<div id="div" class="wrap"></div>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.