Адаптивный флаг Японии как правильно сделать?

Question

[fantazerno]

Добрый день

<div class="wraper ">
          <div class="modal">
             
         </div>
  </div>

.wraper{
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: rgb(255, 255, 255);
}
.modal{
    background: red;
    flex-basis: 100px;
    border-radius: 50%;
    min-height: 100px;
}

Нужно сделать флаг Японии (красный круг по центру), чтобы он был адаптивным. Расположить его ровно по центру можно флексбоксом, но как сделать чтобы размеры круга менялись в зависимости от размера окна, при этом круг не должен становиться овалом. Это получится если задать его размеры в процентах от ширины окна.

Answer 1

[Евгений Петров]

Мы же помним, что margin и padding считаются от ширины контейнера? Пример

Comments

[fantazerno]

Отлично

Answer 2

[SagePtr]

Одним градиентом: https://jsfiddle.net/f47r6nso/
Соотношение японского флага не помню, потому поставил 75%, можно поставить любое

Answer 3

[Павел]

jsfiddle.net/Carduelis/t20j0bdg

Используя padding в процентах, мы можем контролировать высоту блока (и соотношение сторон) в зависимости от ширины окна. И точно работает во всех браузерах, в отличие от единиц vh/vh.

Есть некоторые трудности при высчитывании нужных значений left/top/width/height/padding, но используя препроцессоры - все легко превращается в переменные и ничего пересчитывать не нужно: одна переменная будет отвечать за соотношение сторон флага, вторая переменная - размер круга по центру.

Answer 4

[Александр Таратин]

https://jsfiddle.net/QW01_01/yarpzac1/
Вертикально сами выровняете.
Статья www.mademyday.de/css-height-equals-width-with-pure...