Я создаю отзывчивый веб-сайт, что означает, что я не могу заниматься фиксированной шириной и высотой. Теоретически, контейнер должен составлять 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;
}
Вот скрипка Спасибо
Хорошо, теперь я понимаю вашу проблему.
Использовать этот 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;
}
Это может быть не самый оптимальный способ, но вот пример использования jQuery для установки ширины по высоте изменения размера окна div. Здесь скрипка.
$(window).resize(function() {
$('#container').width($('#container').height());
});