Как сделать, чтобы круг пропорционально увеличивался в размерах на разных экранах?

Question

[Sinegal911]

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

Answer 1

[Aetae]

object-fit: cover;
Но зачем?

Comments

[Sinegal911]

Круг - не изображение, див

[Максим]

Sinegal911, так ?

[Sinegal911]

Максим Ленский, нет, посмотрите на пример в вопросе: синий цвет - это условный экран, а голубой - непосредственно круг. То есть круг должен заполнять вся пространство экрана (для пользователя это будет отображаться, как сплошной цвет).

[Максим]

Sinegal911, круг же овальным быть не может

[Sinegal911]

Максим Ленский, он и не должен быть овальным.

[Максим]

Sinegal911, получается что та область круга которая выходит за область viewport не видна ?

[Sinegal911]

Максим Ленский, да, всё так

[Максим]

Sinegal911, тогда я обновил сниппет - посмотрите ещё раз

[Sinegal911]

Максим Ленский, это чутка не то, потому что это просто глобальное увеличение элемента, а мне необходимо, чтобы он шел по границам viewport'a. То есть чтобы круг строго соответствовал размерам экрана, но чтобы на экране это выглядело как сплошной цвет (потому что из-за закругленной формы он в любом случае будет выходить за пределы экрана). На примере видно, что круг как бы обтекает viewport, вот этого я и хотел бы добиться.

[Максим]

Sinegal911, а как это увидить что он за пределами ? это же просто background и всё

[Sinegal911]

Максим Ленский, это часть анимации, которую я хочу реализовать.