CSS. Как масштабировать div вместе с содержимым под высоту экрана?

189

24 сентября 2019, 08:00

Я могу масштабировать div вместе с содержимым вот так:

.my_div {
    zoom: .9;
}

Но как сделать чтобы уровень масштабирования устанавливался сам соответственно высоте экрана?

Я пробовал делать так:

.my_div {
    height: 100vh;
    width: auto;
}

Но тогда масштабируется только сам div, а контент с текстом и изображениями может вылезать за его пределы (объём контента внутри div непредсказуем). Есть ли способ использовать нечто условно вроде вот такого:

zoom: 100vh;

Дополнение:

Я хотел использовать медиа-запросы, но насколько я понял, они просто возвращают мне ответ "да" или "нет" на мой вопрос о том, попадает ли текущая высота или ширина окна в некий указанный мной диапазон, например 500px.

Допустим я получил ответ, что высота экрана меньше 500px.
И как мне это поможет?
Указать для каждой высоты экрана определённое значение zoom?

Но я не могу заранее предсказать каков будет контент блока, а значит и какова будет его высота, а значит и какое значение zoom мне использовать чтобы блок идеально вписался в окно браузера.

Мне нужно найти способ динамического изменения свойства CSS 'zoom', при котором блок my_div будет масштабироваться (уменьшаться или увеличиваться) под текущую высоту экрана вместе со всем содержимым (размер текста также должен масштабироваться). Я подозреваю что на чистом CSS это сделать не выйдет.

Answer 1

Вот первый блок с пропорцией 2x1, второй с контентом всегда на 100% не выходящий за рамки

const input = document.getElementById('widthOne'); 
const div = document.getElementById('one'); 
 
input.addEventListener('change', ()=>{ 
  div.style.width = input.value + 'px'; 
  div.style.height = 'calc(' + input.value + 'px / 2)'; 
});

* { 
  padding: 0; 
  margin: 0 
} 
 
.one { 
  width: 100vw; 
  background: skyblue; 
  height: calc(100vw / 2); 
  position: relative; // лишнее 
} 
 
.one span { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  font-size: 2rem; 
  transform: translate(-50%, -50%) 
} 
 
.content100 { 
  width: 50%; 
  margin: 10px auto; 
} 
 
.content100 h2 { 
  text-align: center; 
} 
 
.content100>* { 
  max-width: 100%; 
}

Ширина первого блока: <input id="widthOne" type="number" step="1"/> 
 
<div class="one" id="one"> 
  <span>2x1</span> 
</div> 
 
<div class="content100"> 
  <h2>Контент всегда 100% любой</h2> 
  <img src="https://images.unsplash.com/photo-1496092607007-ca127e0b6a10?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=785&q=80"> 
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt similique saepe aliquam quaerat laborum omnis corrupti velit, nam corporis quae facilis vitae quod voluptas, odit doloremque. Eum illum, cupiditate, quod omnis unde eligendi laudantium 
    quisquam tempora nihil magnam totam atque consequatur autem aspernatur sapiente quae. In, reiciendis. Rem, iste possimus!</p> 
</div>

Answer 2

Попробуй выставить:

html, body {
    margin: 0;
    height: 100%;
}

Answer 3

На чистом CSS не знаю как, сделал скрипт:

setInterval( () => {
    let winHeight = $(window).height();     // высота окна
    let divHeight = $('.my_div').height();  // высота блока
    let ratio = winHeight / divHeight;      // отношение между ними
    $('.my_div').css({ zoom: ratio });      // масштабирование блока 
}, 200);

Answer 4

Можно повесить обработчик события на resize окна и с помощью css transform: scale() изменять масштаб объекта как хотите. Zoom не имеет официальной поддержки и его лучше не использовать.

Ещё есть вариант использовать: <meta name="viewport" content="height=device-height" /> c установкой соответствующего height для блока.