it-swarm.com.de

Reine CSS-Lösung - quadratische Elemente?

Wenn ich einen <div> mit einer relativen Breite habe (z. B. width: 50% ), gibt es eine einfache Möglichkeit, es so zu machen, dass es dieselbe Breite hat wie Höhe, ohne auf JavaScript zurückzugreifen?

20
Trey Keown

Es ist tatsächlich möglich, es mit diesem tollen Trick zu erreichen, den ich gefunden habe dieses Blog

#square {
   width: 100%;
   height: 0;
   padding-bottom: 100%;
}

Hoffentlich hilft das

42

Nein und Ja (Kinda)

Okay, die kurze Antwort lautet "Nein" und ist nicht möglich. Die lange Antwort lautet "Ja", wenn bestimmte Einschränkungen und Zugeständnisse vorliegen (d. H. Zusätzliches HTML-Markup und Einschränkungen, was getan werden kann).

In Anbetracht dieser CSS:

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
    overflow: auto; /* UPDATE: if content may overflow square */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Mit diesem HTML:

<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="extrawrapper">
<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
</div>
<div class="extrawrapper">
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
</div>

Sie können es machen was diese Geige zeigt .

Die Schlüssel sind:

  1. Das verwendete Bild muss ein quadratisches Bild sein, da es die proportionale Größenanpassung steuert (das img-Element ist das einzige Element, das eine solche proportionale Arbeit ausführen kann, da es seine Größe von dem Anteil des Bildes selbst ableiten kann).
  2. Sie müssen wissen, ob Sie width oder height so einstellen möchten, dass Sie die Image-Klasse richtig einstellen können. Optional, setzen Sie width oder height auf img selbst. Sie müssen sich also keine Gedanken darüber machen, ob Sie eine Klasse auf den 100%-Wert setzen. Meine Demo ging davon aus, dass Sie die Größe für den Wrapper div (meine .square-Klasse) festgelegt haben.
  3. Damit div um die img kollabiert, die die proportionale Größenanpassung bewirkt, müssen Sie display: inline-block oder eine float für die div einstellen (wie oben in der css angegeben).
  4. Aufgrund von # 3 müssen Sie, wenn Sie möchten, dass div "blockartiger" agiert, einen zusätzlichen Wrapper div geben, wie es der dritte und vierte zeigen.

Offensichtlich gibt es eine Menge zusätzlicher Markups für diese Lösung. In vielerlei Hinsicht ist es besser zu sagen "Verwenden Sie einfach Javascript", aber ich wollte beweisen, dass dies möglich ist zumindest in einigen Fällen rein mit HTML und CSS.

Update: So zeigen Sie die Möglichkeit zur flexiblen Bemessung an

Siehe diese Geige für Prozentsätze, die die Größe steuern, wobei dieses HTML-Beispiel (width auf 30%) gesetzt ist:

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
12
ScottS

Ich musste heute etwas Ähnliches erreichen und hatte die gleiche Idee mit dem Image. Ich wollte andere Möglichkeiten prüfen und google führte mich hierher.

... Sie brauchen nicht wirklich ein Bild src. Sie können einfach eine hash verwenden, wenn Sie ein Quadrat wünschen. .__ Speichert eine http-Anfrage.

Wenn Sie ein anderes Seitenverhältnis wünschen, sollten Sie eine src verwenden. Wenn Sie ein Verhältnis von 16: 9 haben möchten, sollte das Bild 16px breit und 9px hoch sein (so klein wie möglich gehen)


Beide Techniken vergleichen (siehe andere Antworten in diesem Thread)

img vs. padding-bottom

Hier ist eine Geige um zu zeigen, wie viel kompatibler die img-Version ist (kann auch mit pxvalue problemlos umgehen)

Wenn Sie Prozentwerte verwenden, können beide Techniken dasselbe Ergebnis erzielen, aber die Auffüllversion erfordert keine zusätzliche Markierung (<img src="#"/>).


Fazit:

Je nach Implementierung hat jede Technik ihre Vor- und Nachteile.


HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}
2
user950658

Dies ist nicht nur mit CSS möglich. Mit jQuery können Sie dies erreichen

var chld = $('.child').width();
$('.child').css({'height':chld+'px'});

Überprüfen Sie das Funktionsbeispiel unter http://jsfiddle.net/4Jnfq/


Eine reine CSS-Lösung finden Sie hier beim letzten "Größenänderung mit Inhalt" -Update.
Obwohl es für Kreise gilt, können Sie den border-radius: 50% entfernen, damit er für Quadrate funktioniert.

Nicht bei relativen Einheiten wie %, da diese relativ zu einem Containerelement berechnet werden. Es ist jedoch möglich, ein Element quadratisch zu machen, wenn Sie Einheiten wie px oder em verwenden, um beide Dimensionen festzulegen.

0
bfavaretto

Ein nativer Ansatz von JS als Antwort auf den Kommentar von @Dave zur Antwort von @ praveen-kumar:

var squareElement = function(el) {
    el.style.height = el.offsetWidth + 'px';
}

und es überall verwenden

squareElement(document.querySelector('your-selector'));
0
Antoine