Хочу сделать круг (для начала квадрат), но не знаю как сделать его полностью адаптивным (корректное отображение на всех разрешениях), чтобы он всегда сохранял форму(пропорцию высота/ширина). А также отображение его по-середине страницы. Желательно на css чистом, приемлимо js
-
jsfiddle.net/3k0ej1p7 jsfiddle.net/3k0ej1p7/1 А вообще почитайте основы как сделать квадрат и круг, в интернете информации тонны.– Moonvvell5 янв 2016 в 12:50
-
Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).– Nicolas Chabanovsky ♦6 янв 2016 в 2:25
Добавить комментарий
|
4 ответа
как вариант, единицы измерения vh
дадут адаптивность в зависимости от разрешения
.square {
background: #000;
width: 10vh;
height: 10vh;
margin: 0 auto;
/* border-radius: 50%; */
}
<div class="square"></div>
для превращения квадрата в круг уберите комментарий border-radius: 50%;
.circle {
width: 15%;
background: #900C3F;
border-radius: 50%;
text-align: center;
font-size: 18px;
margin: 0 auto;
cursor: pointer;
transition: 1s;
}
window.onload = function() {
var circle = document.querySelectorAll(".circle");
var circIn = document.querySelectorAll(".circle__inv");
for(var i = 0;i<circle.length;i++) {
circle[i].style.height = circle[i].offsetWidth + "px";
}
};
<div class="circle">
<div class="circle__inv">
<span class="count__hgt">Выберите интересующую тему</span>
</div>
</div>
circle__inv нужен для дальнейшей коррекции текста(padding-top) без костылей, вроде статических значений
.b-square {
width: 100%;
background: #f00;
max-width: 400px;
margin: 15px auto;
}
.b-square:before {
content: "";
display: block;
padding-top: 100%;
}
.b-circle {
width: 100%;
background: #00f;
max-width: 400px;
margin: 15px auto;
border-radius: 50%;
}
.b-circle:before {
content: "";
display: block;
padding-top: 100%;
}
<div class="b-square"></div>
<div class="b-circle"></div>
body {
font-size: 2em;
color: blue;
}
.square, .circle {
display: inline-block;
width: 29%;
background: silver;
text-align: center;
}
.square:before, .circle:before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
}
.circle {
border-radius: 50%;
}
.contents {
display: inline-block;
vertical-align: middle;
}
<div class="square">
<div class=contents>Square</div>
</div>
<div class="circle">
<div class=contents>Circle</div>
</div>