web-dev-qa-db-de.com

Höhe gleich dynamischer Breite (CSS Fluid Layout)

Ist es möglich, die gleiche Höhe wie die Breite einzustellen (Verhältnis 1: 1)?

Beispiel

+----------+
| body     |
| 1:3      |
|          |
| +------+ |
| | div  | |
| | 1:1  | |
| +------+ |
|          |
|          |
|          |
|          |
|          |
+----------+

CSS

div {
  width: 80%;
  height: same-as-width
}
javascriptjqueryhtmlcssresponsive-design
400
Thomas Norman

Mit jQuery können Sie dies erreichen

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

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/n6DAu/1/

64
Hussein

[Update: Obwohl ich diesen Trick unabhängig entdeckt habe, habe ich seitdem erfahren, dass Thierry Koblentz mich geschlagen hat. Sie finden seinen 2009 Artikel auf A List Apart. Kredit, wo Kredit fällig ist.]

Ich weiß, dass dies eine alte Frage ist, aber ich bin auf ein ähnliches Problem gestoßen, das ich nur mit CSS gelöst habe . Hier ist mein Blogpost , der die Lösung bespricht. Der Beitrag enthält ein Live-Beispiel . Code wird unten neu gepostet.

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>
667
Nathan Ryan

Es gibt einen Weg mit CSS!

Wenn Sie die Breite in Abhängigkeit vom übergeordneten Container festlegen, können Sie die Höhe auf 0 und den Abstand zum unteren Rand auf den Prozentsatz festlegen, der in Abhängigkeit von der aktuellen Breite berechnet wird:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

Dies funktioniert gut in allen gängigen Browsern.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

384
Kristijan

Es ist ohne Javascript möglich :)

Dieser Artikel beschreibt es perfekt - http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Der HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div>

Das CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}
92
Sathran

Einfach und unkompliziert: Verwenden Sie vw Einheiten für eine ansprechende Höhe/Breite entsprechend der Breite des Ansichtsfensters.

vw: 1/100 der Breite des Ansichtsfensters. ( Quell-MDN )

DEMO

HTML: 

<div></div>

CSS für ein Seitenverhältnis von 1: 1:

div{
    width:80vw;
    height:80vw; /* same as width */
}

Tabelle zur Berechnung der Höhe gemäß dem gewünschten Seitenverhältnis und der Breite des Elements.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

Mit dieser Technik können Sie:

  • füge Inhalte in das Element ein, ohne position:absolute; zu verwenden.
  • kein unnötiges HTML-Markup (nur ein Element)
  • passen Sie das Seitenverhältnis der Elemente mit VH-Einheiten an die Höhe des Ansichtsfensters an
  • sie können ein responsives Quadrat oder ein anderes Seitenverhältnis festlegen, das immer in das Ansichtsfenster entsprechend der Höhe und Breite des Ansichtsfensters passt (siehe diese Antwort: responsives Quadrat entsprechend der Breite und Höhe des Ansichtsfensters oder Demo )

Diese Einheiten werden von IE9 + unterstützt, siehe kann für weitere Informationen verwendet werden

67
web-tiki

Extrem einfache Methode jsfiddle

HTML

<div id="container">
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}
57
Ninjakannon

Wenn Sie die Technik des Auffüllens von oben und unten erweitern, können Sie ein Pseudoelement verwenden, um die Höhe des Elements festzulegen. Verwenden Sie float und negative Ränder, um das Pseudoelement aus dem Fluss und der Ansicht zu entfernen.

Auf diese Weise können Sie Inhalte innerhalb der Box platzieren, ohne eine zusätzliche div- und/oder CSS-Positionierung zu verwenden.

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}


/* proportions */

.fixed-ar-1-1::before {
  padding-top: 100%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-16-9::before {
  padding-top: 56.25%;
}


/* demo */

.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  background: #EEE url(https://lorempixel.com/800/450/food/5/) center no-repeat;
  background-size: contain;
}
<div class="fixed-ar fixed-ar-1-1">1:1 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>
8
Salman A

eigentlich gehört das als Kommentar zu Nathans Antwort, aber das darf ich noch nicht ...
Ich wollte das Seitenverhältnis beibehalten, auch wenn zu viel Material in die Box passt. Sein Beispiel erweitert die Höhe und ändert das Seitenverhältnis. Ich fand das Hinzufügen

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

zum .element geholfen. Siehe http://jsfiddle.net/B8FU8/3111/

4
craq