Как масштабировать DIV и всего содержимого в нём с сохранением пропорций?

Question

[Alex]

Есть div с текстом, изображениями и тд. Есть жестко заданный размер например 1920х1080px. И есть свободное место в родительском div, в которое он должен вмещаться и масштабироваться относительно центра вместе с содержимым.

Есть ли вариант реализации подобного на чистом CSS? Если да то как?

Или всё такие лучше взять JS? В JS я вижу самый очевидный для меня вариант это вычислять размеры родительского div и соотносить их с размерами 1920х1080px например и таким образом вычислять scale и устанавливать значение как CSS в transform scale. Либо может есть варианты лучше?

Answer 1

[bqio]

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.children {
  padding: 1rem;
}

<div class="parent">
  <div class="children">Center</div>
</div>

Если хочешь по центру экрана, то:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.children {
  padding: 1rem;
}

Comments

[Alex]

Похожее CSS решение я видел, но это без масштабирования содержимого.

[ambisinister One]

Alex, width: calc() ; font-size: calc() ; margin: calc() ;
То-же самое с width:clamp() и т.д.