У Andrew Welch, на днях, был небольшой CSS челлендж, в котором было нужно создать обычный div который:
- отцентрирован по вертикали и горизонтали
- масштабируется по размеру области просмотра с отступами по периметру
- поддерживает произвольное соотношение сторон
- Без JS
В твите, на который я давал ссылку выше, есть видео которое поможет вам визуализировать задание.
Mark Huot стал фантазировать, применяя пропорции непосредственно к ширине/высоте div и создавая отступы отталкиваясь от разницы этих размеров.
Идея Amelia Wattenberger была задать единицы измерения vw/vh для height/width и max-height/max-width, и отцентрировать div классическим трюком с translate:
Eric A. Meyer сделал также, только отцентрировал div с помощью flexbox.
Brian Hart использовал единицы измерения vmin для соотношения сторон и отцентрировал div с помощью flexbox:
Benoît Rouleau сделал аналогично, но использовал calc() для отступов.
Andrew очень понравился подход Jonathan Melville. Правда большая часть элементов содержит классы Tailwind, которые мне трудновато понять, так как я не привык работать с этим фреймворком и читать его код.
Andrew сказал, что в конечном итоге он выбрал вариант с использованием vmin - хотя я вижу, что в этом варианте используется calc() для вычитания единиц vmin друг из друга, а это в действительности не нужно, если вы конечно не хотите видеть излишние вычисления в коде.