it-swarm.com.de

Wie kann man ein Div so stylen, dass es ein reaktionsfähiges Quadrat ist?

Ich möchte, dass mein Div seine Höhe so anpasst, dass er immer der Breite entspricht. Die Breite ist prozentual. Wenn die Breite des übergeordneten Elements abnimmt, sollte das Feld verkleinert werden, indem das Seitenverhältnis beibehalten wird.

Wie macht man das mit CSS?

157
danijar

Um das zu erreichen, wonach Sie suchen, können Sie Ansichtsfenster-prozentuale Längevw verwenden.

Hier ist ein kurzes Beispiel, das ich am jsfiddle gemacht habe.

HTML:

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

CSS:

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

Ich bin sicher, es gibt viele andere Möglichkeiten, dies zu tun, aber dieser Weg schien mir der beste zu sein.

164
Daniel Burkhart

Funktioniert auf fast allen Browsern.

Sie können versuchen, padding-bottom als Prozentsatz.

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

Das äußere Div bildet ein Quadrat und das innere Div enthält den Inhalt. Diese Lösung hat bei mir viele Male funktioniert.

Hier ist ein jsfiddle

180
rahulbehl

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/

43
gidzior

Es ist so einfach wie die Angabe eines Polsterbodens, dessen Größe der Breite in Prozent entspricht. Wenn Sie also eine Breite von 50% haben, verwenden Sie einfach das folgende Beispiel

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

Hier ist eine jsfiddle http://jsfiddle.net/kJL3u/2/

Bearbeitete Version mit ansprechendem Text : http://jsfiddle.net/kJL3u/394

32
Chipe

Eine andere Möglichkeit ist die Verwendung einer transparenten 1x1.png mit width: 100%, height: auto in einem div und absolut darin positionierten Inhalt:

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/

7
gskalinskii

Das habe ich mir ausgedacht. Hier ist eine Geige .

Zunächst benötige ich drei Wrapper-Elemente für eine quadratische Form und zentrierten Text.

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

Das ist der Stylecheet. Es werden zwei Techniken verwendet, eine für quadratische Formen und eine für zentrierter 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;
}
3
danijar