CSS - круглый div резиновый

RedRabbit

Мой дом здесь!
Регистрация
11 Июл 2008
Сообщения
607
Реакции
256
Почему не работает height и width с процентами, а с фиксированной длиной работает? И как сделать, чтобы div имел резиновый вид?

Код:
.menucircle3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url(image.png);
    height:100%;
    width:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid;
    border-radius: 9999px;
    border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1);
}
 
body,html{height:100%,width:100%}.
 
Последнее редактирование:
Почему не работает height и width с процентами, а с фиксированной длиной работает? И как сделать, чтобы div имел резиновый вид?

Код:
.menucircle3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url(image.png);
    height:100%;
    width:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid;
    border-radius: 9999px;
    border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1);
}

Все работает даже если заданы проценты ширины и высоты дива:screenshot.2.png
Просто не контачит с стилем border-color.
Сделаете так:
Код:
.menucircle3 {
  background-size: cover;
  background-repeat: no-repeat;
  background-image:url(image.png);
  height:100%;
  width:100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 5px solid;
  border-radius: 9999px;
   /*border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1);*/
  border-color:#0000;
}
 
у меня тоже с процентами не работает
 
если родительский блок absolute или relative, то можно так
.menucircle3 {position:absolute; top:0;left:0;bottom:0;right:0}
 
относительно чего видс и хейдс должно быть 100%
кусок хтмл в студию
 
Почему не работает height и width с процентами, а с фиксированной длиной работает? И как сделать, чтобы div имел резиновый вид?

Код:
.menucircle3 {
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url(image.png);
    height:100%;
    width:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid;
    border-radius: 9999px;
    border-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1) rgba(255, 255, 255, 1);
}
во первых задай min-width
во вторых задай width с размерами для выше стоящих по ДОМу елементов, иначе сейчас не счего считать размеры 100%, он не знает от чего отталкиватся, 100% от 100рх, или же 100% от 10000000рх. Задай для родителя размеры строгие, а этому задай процентный и минимальный, высоту вопще выкинуть можеш из стиля
 
Назад
Сверху