Мобильная версия
А вот поведение, которое я ожидал, было кругами (т. е. соотношение сторон 1:1). Мой код для этого следующий:
Код: Выделить всё
#portals {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.portal {
display: flex;
justify-content: center;
width: 30%;
border-radius: 1rem;
background-color: aqua;
height:50rem;
margin:1rem
}
.portal-icon {
aspect-ratio: 1 / 1;
width:90%;
border-radius: 50%;
background-color: white;
margin:1rem
}Код: Выделить всё
```
Глядя на другие подобные вопросы, у меня сложилось впечатление, что этот аспект- Ratio был правильным способом добиться этого с использованием современных браузеров, но, похоже, он не работает для меня все время, пока я использую гибкие поля, как только я возвращаюсь к стандартным полям, круги работают, но Тогда я не могу центрировать круги в прямоугольниках.
Я также читал об использовании трюка с отступом снизу, но он не имеет никакого эффекта при все. Кроме того, я прочитал несколько ответов, в которых говорилось, что использование процентов в этом свойстве не работает и не должно использоваться, или что оно устарело и вместо него следует использовать соотношение сторон.
По сути, я не знаю, что делать, потому что, похоже, единственные два доступных метода противоречат друг другу (насколько я вижу), которые следует использовать, но ни один из них у меня не работает. >
Я также видел некоторые упоминания о возможности достижения такого поведения с помощью JS, однако у меня 0 опыта в этом, поэтому, если бы мне можно было указать правильное направление, как я мог бы писать сценарий для этого, если CSS будет невозможен, это было бы здорово.
Заранее спасибо.
Подробнее здесь: https://stackoverflow.com/questions/783 ... er-element
