1

Добрый день всем. Вопрос: как при помощи css круг сделать под любой экран? width, height и border-radius в процентах дают круг на одних экранах и эллипс на других.

1
  • Для диспропорциональных экранов у вас ничего не получится) Софт не в курсе, что там жесть неоткалиброванная.
    – vp_arth
    3 мар 2017 в 13:52

2 ответа 2

0

Ширину с высотой нужно делать одинаковыми, тогда всё должно быть норм.

circle {
  display: inline-block;
  border-radius: 100%;
}

.half_w {
  width: 50vw;
  height: 50vw;
}

.tenth_h {
  width: 10vh;
  height: 10vh;
}

.red {
  background-color: red;
}
<circle class="tenth_h red"></circle>
<circle class="half_w red"></circle>

1
  • Спасибо за ответ, помогло)
    – Riley
    3 мар 2017 в 14:32
0

Через псевдоэлемент-распорку с padding-top: 100%.

.circle {
  width: 100%;
  border-radius: 50%;
  background-color: lightblue;
}

.circle:before {
  content:'';
  padding-top: 100%;
  display: inline-block;
}
<div class=circle></div>

1
  • Этот вариант тоже опробую) Спасибо
    – Riley
    3 мар 2017 в 14:32

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.