Как стилизовать div, чтобы быть отзывчивым квадратом?

Question

Я хочу, чтобы мой div приспосабливал его высоту, чтобы всегда было равно ее ширине. Ширина percental. Когда ширина родителя уменьшается, ящик должен уменьшаться, сохраняя его соотношение сторон.

Как это сделать, CSS?

Answer 1

Чтобы добиться того, что вы ищете вы можете использовать viewport-percentage lengthvw.

Вот краткий пример, который я сделал на jsfiddle.

HTML:

<div class="square"> 
    <h1>This is a Square</h1> 
</div> 

CSS:

.square { 
    background: #000; 
    width: 50vw; 
    height: 50vw; 
} 
.square h1 { 
    color: #fff; 
} 

Я уверен, что есть много других способов сделать это, но этот путь казался лучшим для меня.

Answer 2

Работает практически во всех браузерах.

Вы можете попробовать дать padding-bottom в процентах.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red"> 
<div> 
Content goes here 
</div> 
</div> 

Внешний div делает квадрат, а внутренний div содержит содержание. Это решение работало для меня много раз.

Вот jsfiddle

Answer 3

Это то, что я придумал. Вот a fiddle.

Во-первых, мне нужны три элемента обертки как для квадратной формы, так и для центрированного текста.

<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> 

Это стиль. Он использует два метода: один для square shapes и один для centered text.

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; 
} 

Answer 4

Это так же просто, как указание нижнего дна такого же размера, как и ширина в процентах. Так что если у вас есть ширину 50%, просто использовать этот пример ниже

id or class{ 
    width: 50%; 
    padding-bottom: 50%; 
} 

Вот это jsfiddle http://jsfiddle.net/kJL3u/2/

отредактированную версию с отзывчивым текста: http://jsfiddle.net/kJL3u/394

Answer 5

Другой способ заключается в использовании прозрачный 1x1.детские с 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/

Answer 6

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/