godsplan
@godsplan

Как адаптивно верстать круг выходящий за границы контейнера?

Мне просто интересно это правильно верстать, потому что мое решение мне не сильно нравится.
Сам элемент.
61ab554d67d35390458342.png

Мое решение:
https://codepen.io/poylar/pen/GRMpOMr
Мне не нраится в моем решениии фиксированная высота и ширина, а так же в мобилке из-за этого ширина в процентах идет выше 100% , потому что в мобилке этот блок должен выходить за боковые рамки.
Прошу совета как сделать лучше.
  • Вопрос задан
  • 78 просмотров
Решения вопроса 2
@alekcena
Нелинейный наставник
1) Не вижу проблем с фиксированными величинами для кастомных элементов. Несколько медиа запросов.
2) Если принципиально нужно решить в %. Делаем относительно. В внутрь текст абсолютом. Как это работает(Первая загугленая статья)
.round {
      max-width: 827px;
      height:0;
      padding-top:30%;
      width: 100%;
}
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега CSS
frontend developer


Вариантов много. Например, так.
Здесь я применил свойство aspect-ratio, просто чтобы сократить код, и побыстрее написать пример. Вы можете использовать хак с паддингом и дополнительным элементом для круга, если нужна поддержка более старых браузеров.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы