Я хочу, чтобы мой div изменял высоту так, чтобы она всегда была равна ширине. Ширина указана в процентах. Когда ширина родительского элемента уменьшается, поле должно уменьшаться, сохраняя свое соотношение сторон.
Как это сделать в CSS?
Я хочу, чтобы мой div изменял высоту так, чтобы она всегда была равна ширине. Ширина указана в процентах. Когда ширина родительского элемента уменьшается, поле должно уменьшаться, сохраняя свое соотношение сторон.
Как это сделать в CSS?
Работает практически во всех браузерах.
Вы можете попробовать дать padding-bottom
в процентах.
<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>
Внешний div создает квадрат, а внутренний div содержит контент. Это решение сработало у меня много раз.
Вот jsfiddle
box-sizing: content-box;
, если вы добавите границу к объекту. Иначе это может исказить соотношение 1: 1. (произошло при добавлении жирного бордюрного радиуса)
- person zsitro; 10.12.2015
position: absolute;
на внутреннем div
, чтобы он заработал. Элементы с абсолютным позиционированием игнорируются при вычислении родительских размеров. Это означает, что вы можете добавлять во внутренний элемент контент, а также отступы, границы и т. Д. :) См. эту скрипку.
- person Max Truxa; 27.10.2016
Чтобы добиться того, что вы ищете, вы можете использовать длину окна просмотра в процентах vw
.
Вот небольшой пример, который я сделал на jsfiddle.
HTML:
<div class="square">
<h1>This is a Square</h1>
</div>
CSS:
.square {
background: #000;
width: 50vw;
height: 50vw;
}
.square h1 {
color: #fff;
}
Я уверен, что есть много других способов сделать это, но этот способ мне показался лучшим.
HTML
<div class='square-box'>
<div class='square-content'>
<h3>test</h3>
</div>
</div>
CSS
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
text-align: center;
}
http://jsfiddle.net/38Tnx/1425/
max-width
- person Gidgidonihah; 17.11.2017
Это так же просто, как указать нижний отступ того же размера, что и ширина в процентах. Поэтому, если у вас ширина 50%, просто используйте этот пример ниже.
id or class{
width: 50%;
padding-bottom: 50%;
}
Вот jsfiddle http://jsfiddle.net/kJL3u/2/
Отредактированная версия с адаптивным текстом: http://jsfiddle.net/kJL3u/394
overflow:hidden
или другого абсолютного позиционирования дочерних элементов внутри контейнера. Удобно точно так же, как ответ @gidzior
- person mix3d; 26.10.2015
Другой способ - использовать прозрачный 1x1.png с width: 100%
, height: auto
в div
и абсолютно позиционированным содержимым внутри него:
html:
<div>
<img src="1x1px.png">
<h1>FOO</h1>
</div>
css:
div {
position: relative;
width: 50%;
}
img {
width: 100%;
height: auto;
}
h1 {
position: absolute;
top: 10px;
left: 10px;
}
Fidle: http://jsfiddle.net/t529bjwc/
<svg viewBox='0 0 1 1'></svg>
- person Nelo Mitranim; 02.06.2018
Это то, что я придумал. Вот скрипка.
Во-первых, мне нужны три элемента-оболочки как для квадратной формы, так и для центрированного текста.
<div><div><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</div></div></div>
Это таблица стилей. В нем используются два метода: один для квадратных форм и один для текст по центру.
body > div {
position:relative;
height:0;
width:50%; padding-bottom:50%;
}
body > div > div {
position:absolute; top:0;
height:100%; width:100%;
display:table;
border:1px solid #000;
margin:1em;
}
body > div > div > div{
display:table-cell;
vertical-align:middle; text-align:center;
padding:1em;
}
display:table-cell
не поддерживается в IE7 и старше.
- person TheCarver; 23.02.2014