HTML и CSS Fluid Circle

Хакът border-radius:50%, който използвате, прави предположението, че <div> е квадратно преди прилагането на заоблените ъгли, в противен случай ще се получи овал, а не кръг, точно както сте отбелязали.

Следователно, ако искате кръгът да остане кръгъл, докато съдържанието се разширява, трябва динамично да регулирате височината, за да съответства на ширината. Вероятно ще трябва да използвате Javascript, за да постигнете това.

Освен това имайте предвид, че border-radius не се поддържа в по-стари версии на IE, така че потребителите с IE6, IE7 или IE8 изобщо няма да виждат вашия кръг. (макар че има хак за него, наречен CSS3Pie)

Разбира се, коригирането на height ще има страничен ефект от това, че елементът ще заема повече място вертикално. Това може да не е това, което искате; може да искате кръгът да е с еднакъв размер, независимо какво съдържание има в него? В този случай трябва да фиксирате височината и ширината на кръга и да дадете на съдържанието position:absolute;, за да предотвратите влиянието му върху размера на неговия родител.

Алтернатива на използването на хака border-radius за създаване на кръг би била използването на SVG. SVG е векторен графичен формат, който е вграден в повечето браузъри.

Отново забележителното изключение е IE8 и по-ранни, но IE поддържа алтернативен формат, наречен VML. Съществуват различни скриптове, които могат да конвертират между SVG и VML, така че можете да създадете решение за различни браузъри със SVG плюс Javascript.

Ако ще приемем, че Javascript е част от решението, можете просто да използвате библиотека на JavaScript, за да го начертаете на първо място. Моето предложение за това би било Raphael, който генерира SVG или VML графики в зависимост от браузъра, който изпълнява.

Надявам се това да помогне.

Трябва да зададете както width, така и height на максимума от двете, за да изобразите квадрат, който с 50% радиус на ъглите води до кръг.

Можете да направите това в jQuery:

$(function() {
  var $elem = $(".notify > div");
  var maxSize = Math.max($elem.width(), $elem.height());

  $elem.width(maxSize).height(maxSize);
});

Опитайте да промените съдържанието (както по ширина, така и по височина) тук

Пример за течен кръг, използващ само HTML и CSS. Както споменах в моите коментари към въпроса, техниката е обяснена в моята публикация в блога. Освен това, както споменахме, Safari в момента не работи добре с радиус на границата, определен като процент.

Начинът, по който сте направили Jose Rui Santos, можете да постигнете целта си. Но направете малко промени във вашия css.

Като премахване на подложката от .notify > div и добавяне на стилове като този:

.notify > div
{    
    display: table-cell;
    vertical-align: middle;
}

и добавете подложка в клас .notify по този начин:

.notify
{
    position: absolute;
    top: 100%;
    left: 20%;
    background: red;
    border: 2px solid white;
    border-radius: 50%;
    padding: 30px;
    text-align: center;

}

и Jquery код, както е споменато от Jose Rui Santos:

var $elem = $(".notify > div");
var maxSize = Math.max($elem.width(), $elem.height());
$elem.width(maxSize).height(maxSize);

Вижте работещата демонстрация: http://jsfiddle.net/2j5Ek/63/

Форсирането на неговата максимална височина и тегло чрез настройка max-width:XXpx; max-height:XXpx ще свърши работа.

Моля, обърнете внимание, че може да се наложи да използвате CSS3 word-wrap: break-word;, за да разделите думите. Съвместимостта между различни браузъри може да е проблем.

имате нужда от начин да наложите височина/широчина, в противен случай просто ще стане овална... възможно е!

на този html

<div class="notify">
    <div class="child">
        12334        
    </div>
</div>

този jQuery скрипт трябва да го направи..

var cw = $('.child').width();
$('.child').css({
    'height': cw + 'px',
    'line-height': cw + 'px'
});