Квадратный див с относительными размерами

[Smirnov M.]

Здравствуйте, передо мной стоит задача средствами CSS3 нарисовать круг, который бы изменялся в размерах в зависимости от изменения размера окна.

Понятно, что в такой конструкции

<div id="wr">
	<div id="circle1"> </div>
</div>

у внешнего DIVа я ставлю width и height относительные, а у внутреннего

width:100%;
height:100%;
background-color: red;
border-radius: 50%;

Как же мне сделать так, чтобы высота внешнего и внутреннего дивов были одинаковые, то есть, чтобы круг не превращался в овал?

Использовать канвас, изображения, джаваскрипт нельзя, только html+css.

[alexandr_v-vich]

наверное вы про это

html, body {position: relative; height: 100%;}

Edited April 26, 2012 by alexandr_v-vich

[SelenIT]

Как-то так?

[alexandr_v-vich]

SelenIT, а зачем absolute и :before ?

Да и на 100%… почему не так? — http://jsfiddle.net/NbYUW/31/ — проще же всё.

Edited April 26, 2012 by alexandr_v-vich

[SelenIT]

alexandr_v-vich, и верно . Перемудрил я. Спасибо за поправку!

[Smirnov M.]

Большое спасибо, как раз то, что нужно!

[Smirnov M.]

А ещё вот такой вопрос: реально ли сделать вот такой сектор круга резиновым? http://jsfiddle.net/APd3m/4/

Edited April 27, 2012 by Smirnov M.

[alexandr_v-vich]

А ещё вот такой вопрос: реально ли сделать вот такой сектор круга резиновым? http://jsfiddle.net/APd3m/4/

Насколько мне известно — нет

[SelenIT]

Ну если очень захотеть...

[alexandr_v-vich]

Ну если очень захотеть...

Тоже была первой мыслью . Жаль не кроссбраузерно…

[SelenIT]

Ах точно, Оперу забыл, нехорошая она капризная северная красавица . Хотя для однородного фона и ее можно "уломать", еще одним слоем без заливки и с толстым скругленным бордером фонового цвета. Для неоднородного фона — видимо, только SVG.

[alexandr_v-vich]

Для неоднородного фона — видимо, только SVG.

А, ну раз уж заговорили — http://forum.htmlbook.ru/index.php?showtopic=34527

Хотя для однородного фона и ее можно "уломать"

У меня так и не вышло… Не сложно пример показать?

[SelenIT]

Пример для Оперы с "покрышкой" вот. Насчет SVG я грешным делом имел в виду вставку его прямо в разметку (одна из приятных фич HTML5, работающая во всём новом, включая даже IE9). Для кроссбраузерности при цейтноте, имхо, лучше всего взять библиотеку типа Rapha?l, там вопросы совместимости (включая конвертацию в VML для IE8-), по идее, решены. Сам, честно признаюсь, с SVG пока серьезных дел не имел, поэтому личным опытом, увы, поделиться не могу...

[Smirnov M.]

Ещё раз спасибо большое :-) Пример с "покрышкой" как раз мне подходит.

[alexandr_v-vich]

Пример для Оперы с "покрышкой" вот.

Спасибо за пример, у меня всё путаница с позиционированием была. Хорош пример, красивый) Засуну в закладки, авось мысль пригодится когда-нибудь)

А про svg. Rapha?l уже да, посоветовали, но по-моему это не то, что мне нужно. Да и ладно, сейчас немного по-другому вопрос ставлю. Думаю приду к чему-нибудь. Так-то штука эта очень важная, ох как важная…

[clavin]

Резиновый круг можно сделать ещё проще.

Как я понял, резиновость круга создаётся за счёт пайдингов, заданных одним значением в процентах (ширина всех пайдингов в этом случае одинакова и рассчитывается относительно ширины родительского контейнера), и за счёт border-radius, также указанных в процентах (а значения для скругления углов уже рассчитываются относительно соответствующей ширины или высоты самого дива-"круга").

Можно и овал, кстати, сделать

Думаю, что position:relative и margin там ни к чему.

[SelenIT]

Так alexandr_v-vich выше уже показал. Сложности начались только с появлением сектора.

[clavin]

Резиновый круг можно сделать ещё проще.

Сейчас я посмотрел свой пример в браузере Опера 10.62 и увидел странную картину:

У дива, который во всех остальных браузерах выглядит как круглый, в Опере выглядит совсем иначе. Его углы скруглились каким-то странным образом.

SelenIT, а зачем absolute и :before ?

Да и на 100%… почему не так? — http://jsfiddle.net/NbYUW/31/ — проще же всё.

В примере от alexandr_v-vich аналогичная ситуация. Если задавать border-radius не в процентах, а в пикселях, то скругление происходит ожидаемо и корректно, но естественно, при изменении размеров шара это скругление работает совсем не так, чтобы шар оставался шаром. Это баг Оперы? Есть этому объяснение? У кого стоят более поздние версии Оперы, не могли бы вы проаерить, всё ли у вас в порядке с данными примерами. Если не в порядке, то решение не кроссбраузерно, что плохо

[alexandr_v-vich]

clavin,

В примере от alexandr_v-vich аналогичная ситуация

Аналогичная или такая же?

Так-то всегда можно задать радиус в 100500px , ну это к вопросу о кроссбраузерности, а так, если не затруднит дайте скрин с моего примера (если он хоть немного отличается).

P.S. В 11.62 нормально.

[clavin]

clavin,

В примере от alexandr_v-vich аналогичная ситуация

Аналогичная или такая же?

Так-то всегда можно задать радиус в 100500px , ну это к вопросу о кроссбраузерности, а так, если не затруднит дайте скрин с моего примера (если он хоть немного отличается).

В вашем примере ситуация полностью аналогичная. Круга нет, есть такой же полускруглённый квадрат, как и на скриншоте к моему примеру.

[alexandr_v-vich]

clavin, мне как-то лень это разбирать. Но можете посмотреть, там бордер ему поставить, большой бордер поставить, поставить 1000% радиусу ну или чего ещё.

Стояла бы ещё старая Опера, может и было б интересно.

[clavin]

alexandr_v-vich, это, вероятно, баг, которых полно у всех браузеров. Навряд ли что-то с этим можно поделать.