Как сделать ширину div, равную его высоте

Question

Как сделать ширину div, равную его высоте

0

Я создаю отзывчивый веб-сайт, что означает, что я не могу заниматься фиксированной шириной и высотой. Теоретически, контейнер должен составлять 60% ширины страницы, и высота должна соответствовать этому. Вопрос: как я могу поддерживать одну и ту же ширину и высоту на чувствительной странице.

    <div id="container">
      <div id="circle">
      </div>
    </div>

#container {
   height:400px; width: 400px;
   padding:1%;
}
#circle {
   background-color:blue;
   border-radius:50%;
   height:96%; width:96%;
   position:absolute;
}

Вот скрипка Спасибо

user2950370 29 нояб. 2013, в 23:55

Источник

3

И проблема у вас ...?
j08691 29 нояб. 2013, в 22:18
0

Я создаю адаптивный веб-сайт, что означает, что я не могу иметь дело с фиксированной шириной и высотой. Теоретически, контейнер должен составлять 60% ширины страницы, а высота должна соответствовать этому. Вопрос: как мне поддерживать одинаковую ширину и высоту на адаптивной странице. Извиняюсь за то, что не сделал это ясно
user2950370 29 нояб. 2013, в 22:43

Теги:

jquery

html

css

circle

2 ответа

0

Это может быть не самый оптимальный способ, но вот пример использования jQuery для установки ширины по высоте изменения размера окна div. Здесь скрипка.

$(window).resize(function() {
$('#container').width($('#container').height());
});

Space Age Crystal 29 нояб. 2013, в 20:40

Ещё вопросы

Я создаю адаптивный веб-сайт, что означает, что я не могу иметь дело с фиксированной шириной и высотой. Теоретически, контейнер должен составлять 60% ширины страницы, а высота должна соответствовать этому. Вопрос: как мне поддерживать одинаковую ширину и высоту на адаптивной странице. Извиняюсь за то, что не сделал это ясно

Paulo Roberto · Accepted Answer · 2013-11-29T21-35-00.000Z

Хорошо, теперь я понимаю вашу проблему.

Использовать этот CSS

#container {
   padding-bottom:100%;
   position:relative;
   width: 60%;
   height: 100%;
}
#circle {
   background-color:blue;
   border-radius:50%;
   width:96%;
   padding-bottom:100%;
   position:absolute;
}

скрипка

Спасибо за ваш вклад, но это не проблема. Я уточнил вопрос своим ответом на «j08691», спасибо
увидеть ответ снова, я сделал римейк @ user2950370