Breite entsprechend der Höhe einstellen

Ich sah Lösung für die Höhe abhängig von der Breite: css height same as width. Oder hier: https://stackoverflow.com/a/6615994/2256981. Aber meine Frage ist das Gegenteil.Breite entsprechend der Höhe einstellen

Mein Element:

<body> 
    <div id="square"></div> 
</body>

Stil für sie:

body, html { 
    margin: 0; 
    height: 100%; 
    min-height: 300px; 
    position: relative; 
} 
div#square { /* My square. */ 
    height: 75%; /* It's height depends on ancestor's height. */ 
    width: 75vh; /* If supported, preliminarily sets it's width. */ 
    position: absolute; /* Centers it. */ 
    left: 50%; top: 50%; transform: translate(-50%, -50%); 
    background-color: darkorange; /* Makes it visible. */ 
}

Script, dass es Platz hält:

window.onload = window.onresize = function (event) { 
    var mySquare = document.getElementById("square"); 
    mySquare.style.width = mySquare.offsetHeight + 'px'; 
};

komplette Code hier: http://jsfiddle.net/je1h/hxkgfr9g/

Die Frage ist das Gleiche in reinem CSS. Kein Skript.

Quelle

2015-04-16 jevgenij

Ich weiß nicht, ob Sie das in CSS tun können. Sie könnten versuchen, https://css-tricks.com/snippets/css/a-guide-to-flexbox/, aber ich weiß nicht, ob das Ihnen helfen wird. – xdhmoore

Funktioniert das, wonach Sie suchen? http://StackOverflow.com/Questions/12899031/Css-Squares-On-resize – xdhmoore

Ich denke auch, dass es in reinem CSS nicht möglich ist, versuchte viele Male ... Wir müssen warten, bevor wir dynamische perfekte Quadrate entwerfen! Die einzige Option, die ich sehe, ist Javascript, wie Sie es tatsächlich geschrieben haben. – Sebastien

Es gibt zwei techiques Ich bin mir bewusst das Seitenverhältnis eines Elements zu halten nach ist es Höhe:

Wenn Höhe Ansichtsfenster relativ:

Sie vh Einheiten verwenden können:

div { 
 
    width: 75vh; 
 
    height: 75vh; 
 
    background:darkorange; 
 
}

<div></div>

Für eine Höhe basierend auf der Höhe eines übergeordneten Elements:

können Sie ein Dummy-Bild verwenden, um das Seitenverhältnis Sie hat. Beispiel mit einem 1: 1-Seitenverhältnis können Sie ein 1 * 1 transparent .png Bild verwenden, oder wie es durch einen @vlgalik 1 * 1 Base64-kodiert gif kommentiert:

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
#wrap{ 
 
    height:75%; 
 
} 
 
#el{ 
 
    display:inline-block; 
 
    height:100%; 
 
    background:darkorange; 
 
} 
 
#el img{ 
 
    display:block; 
 
    height:100%; 
 
    width:auto; 
 
}

<div id="wrap"> 
 
    <div id="el"> 
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
 
    </div> 
 
</div>

Hinweis, dass diese Die letzte Demo wird nicht bei der Fenstergrößenänderung aktualisiert. Aber das Seitenverhältnis beim Laden der Seite gehalten

UPDATE:
Wie in the comments berichtete Einstellung display:inline-flex: auf #el scheint die Aktualisierung auf Fenster Resize-Problem zu lösen.

Quelle

2015-04-16 14:47:00

Oder Sie können Base64 codierte 1x1px transparent GIF oder Inline-SVG verwenden (aber es gibt einige Probleme in FF und ältere Browser mit dem SVG). – vlgalik

@vlgalik schön, ich habe die Antwort aktualisiert. –

Danke für Ihre Antwort. Es ist ein lustiger Hack, und um ehrlich zu sein, habe ich es nicht geschafft, herauszufinden, wie es funktioniert :) Warum brauchen wir "#wrap", um genau zu sein. Und wie du schon sagtest, aktualisiert sie leider nicht die '#el'-Breite bei der Fenstergröße. – jevgenij

Edit:. Missed, dass Sie die Breite in Abhängigkeit von der Höhe einstellen wollte, dies macht das Gegenteil :(

Um alle Verhältnisse zu unterstützen Sie padding-bottom können Prozentsätze in padding-bottom sind immer bezogen auf die Breite des Elements:

/* the wrapper has a width */ 
 
.wrapper { 
 
    position: relative; 
 
    width: 25%; 
 
    margin-bottom: 10px; 
 
} 
 
/* these elements set the height (using padding-bottom) */ 
 
.square { 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
} 
 
.widescreen { 
 
    padding-bottom: 56.25%; /* 9/16 = 0.5625 */ 
 
} 
 

 
/* 
 
* This is the content. 
 
* Needs position:absolute to not add to the width of the parent 
 
*/ 
 
.content { 
 
    /* fill parent */ 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
    
 
    /* visual */ 
 
    padding: 10px; 
 
    background: orange; 
 
    color: white; 
 
}

<div class="wrapper"> 
 
    <div class="square"> 
 
    <div class="content">square</div> 
 
    </div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="widescreen"> 
 
    <div class="content">16:9 ratio</div> 
 
    </div> 
 
</div>

Der einzige Nachteil ist, dass Sie eine Reihe von Wrapper-Elementen benötigen.

Quelle

2015-04-16 15:05:03 darthmaim

Wir finden für die Breite nach Höhe nicht die Höhe nach Breite. – JulianSoto

Breite entsprechend der Höhe einstellen

Antwort

Verwandte Themen