Ich möchte eine div die ihre Breite/Höhe ändern kann, wenn sich die Breite des Fensters ändert.
Gibt es CSS3-Regeln, mit denen sich die Höhe entsprechend der Breite ändern kann? unter Beibehaltung seines Seitenverhältnisses ?
Ich weiß, dass ich dies über JavaScript tun kann, aber ich würde es vorziehen, nur CSS zu verwenden.
Erstellen Sie einfach einen Wrapper <div> mit einem Prozentwert für padding-bottom etwa so:
.demoWrapper {
padding: 10px;
background: white;
box-sizing: border-box;
resize: horizontal;
border: 1px dashed;
overflow: auto;
max-width: 100%;
height: calc(100vh - 16px);
}
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}
<div class="demoWrapper">
<div></div>
</div>Dies führt zu einer <div> mit einer Höhe, die 75 % der Breite des Containers entspricht (Seitenverhältnis 4:3).
Dies beruht auf der Tatsache, dass für die Polsterung :
Der Prozentsatz wird in Bezug auf die Breite des erzeugten Feldes, das den Block [...] enthält (Quelle: w3.org (Hervorhebung von mir)
Padding-bottom-Werte für andere Seitenverhältnisse und 100% Breite :
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%Inhalt im div platzieren :
Um das Seitenverhältnis des Divs beizubehalten und zu verhindern, dass sein Inhalt gestreckt wird, müssen Sie ein absolut positioniertes Kind hinzufügen und es bis zu den Rändern des Wrappers mit strecken:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}Hier ist ein Demo und ein weiteres, ausführlicheres Demo
Es gibt mehrere Möglichkeiten, ein festes Seitenverhältnis anzugeben auf ein Element wie ein div, hier sind 2 von ihnen:
aspect-ratio CSS-Eigenschaftdiv {
background: teal;
width: 50%;
aspect-ratio: 1 / 1;
}
<div>aspect-ratio: 1 / 1;</div>Dies ist die einfachste und flexibelste Lösung . Sie gibt direkt ein festes Seitenverhältnis von Breite zu Höhe (oder Höhe zu Breite) für ein Element an. Das bedeutet, dass Sie auch ein Seitenverhältnis entsprechend den Elementen angeben können Höhe .
Sie hängt nicht von der übergeordneten Breite (wie die Padding-Technik) oder der Größe des Ansichtsfensters ab (wie die folgende vw Einheitstechnik) wird auf die eigene Breite oder Höhe des Elements zurückgegriffen Mehr Informationen über MDN . Das ist es, was es im Vergleich zu anderen Workarounds so leistungsfähig macht.
Dies ist eine moderne Immobilie (2021). Alle modernen Browser unterstützen es, siehe caniuse für präzise Browserunterstützung .
Hier sind einige Beispiele mit unterschiedlichen Seitenverhältnissen:
.ar-1-1 {aspect-ratio: 1 / 1;}
.ar-3-2 {aspect-ratio: 3 / 2;}
.ar-4-3 {aspect-ratio: 4 / 3;}
.ar-16-9 {aspect-ratio: 16 / 9;}
.ar-2-3 {aspect-ratio: 2 / 3;}
.ar-3-4 {aspect-ratio: 3 / 4;}
.ar-9-16 {aspect-ratio: 9 / 16;}
/** For the demo : **/
body {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
}
div {
background: teal;
width: 23%;
margin:1%;
padding:20px 0;
color:#fff;
text-align:center;
}
<div class="ar-1-1">aspect-ratio: 1 / 1;</div>
<div class="ar-3-2">aspect-ratio: 3 / 2;</div>
<div class="ar-4-3">aspect-ratio: 4 / 3;</div>
<div class="ar-16-9">aspect-ratio: 16 / 9;</div>
<div class="ar-2-3">aspect-ratio: 2 / 3;</div>
<div class="ar-3-4">aspect-ratio: 3 / 4;</div>
<div class="ar-9-16">aspect-ratio: 9 / 16;</div>vw Einheiten:Sie können verwenden vw Einheiten sowohl für die Breite als auch für die Höhe des Elements. Dadurch kann das Seitenverhältnis des Elements beibehalten werden, basierend auf der Breite des Ansichtsfensters .
vw : 1/100stel der Breite des Ansichtsfensters. [ _MDN_ ]
Alternativ dazu können Sie auch vh für die Höhe des Ansichtsfensters, oder sogar vmin / vmax die kleinere/größere der beiden Dimensionen des Ansichtsfensters zu verwenden (Diskussion aquí ).
Beispiel: Seitenverhältnis 1:1
div {
width: 20vw;
height: 20vw;
background: gold;
}
<div></div>Für andere Seitenverhältnisse können Sie die folgende Tabelle verwenden, um den Wert für die Höhe in Abhängigkeit von der Breite des Elements zu berechnen:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
width: 23vw;
height: 23vw;
margin: 0.5vw auto;
background: gold;
}
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>Hier ist ein Tüfteln Sie mit dieser Demo und hier ist eine Lösung für die Erstellung einer Responsives Gitter aus Quadraten mit vertikal und horizontal zentriertem Inhalt .
Die Browserunterstützung für vh/vw-Geräte ist IE9+ siehe canIuse für weitere Informationen
aspect-ratio CSS-Eigenschaft<div class='demo'></div>
.demo {
background: black;
width: 500px;
aspect-ratio: 4/3;
}Aktualisierung: diese Lösung wird nun von allen Evergreen-Browsern unterstützt
Ich bin über etwas gestolpert, das ich als eine intelligente Lösung für dieses Problem, unter Verwendung von <svg> y display:grid .
A display:grid Element ermöglicht es Ihnen, denselben Raum mit zwei (oder mehr) seiner Kinder zu belegen, indem Sie dieselbe grid-area .
Das bedeutet, dass sie alle fließend sind, sich überschneiden und aus dem Rahmen fallen. der größere setzt das Verhältnis .
Einer von ihnen wird ein <svg> für die Festlegung des Verhältnisses zuständig. Das andere ist der tatsächliche Inhalt. Wenn der eigentliche Inhalt kurz ist und nie das gesamte Verhältnis ausfüllt (und Sie ihn nur in einem Bereich mit diesem Verhältnis zentrieren möchten), zentrieren Sie ihn einfach (siehe erstes lauffähiges Snippet unten).
<div class="ratio">
<svg viewBox="0 0 1 1"></svg>
<div>
I'm square
</div>
</div>
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1;
}Satz <svg> s-Verhältnis auf das von Ihnen gewünschte Verhältnis:
<svg viewBox="0 0 4 3"></svg><svg viewBox="0 0 16 9"></svg>
.ratio { display: grid; } .ratio > * { grid-area: 1/1; }
/* below code NOT needed for setting the ratio
<div class="ratio"> <svg viewBox="0 0 7 1"></svg> <div> Fixed ratio 7:1 </div> </div>
Wenn Sie eine Lösung benötigen, bei der das Inhaltselement mehr Inhalt hat, den Sie in einen scrollbaren Bereich mit dem gewünschten Verhältnis eingrenzen möchten, setzen Sie position:relative auf dem Elternteil und position:absolute; height:100%; overflow-y: auto; auf den Inhalt, so dass das Flow-Inhaltselement (die <svg> ), um die Größe und damit das Verhältnis festzulegen.
.ratio {
display: grid;
position: relative;
}
.ratio > * {
grid-area: 1/1;
}
.ratio > div {
height: 100%;
overflow-y: auto;
position: absolute;
/* the rest is not needed */
border: 1px solid red;
padding: 0 1rem;
}
<div class="ratio">
<svg viewBox="0 0 7 2"></svg>
<div>
<h1>Fixed ratio 7:2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.
<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.
<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
</div>
</div>Wie @emjay in einem Kommentar weiter unten angemerkt hat, kann das Verhältnis svg in einem der Pseudo-Elemente des Elternteils platziert werden, solange es ordnungsgemäß kodiert ist:
.three-squares {
display: grid;
border: 1px solid red;
}
.three-squares > *, .three-squares:before {
grid-area: 1/1;
}
.three-squares:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3C/svg%3E");
line-height: 0;
}
<div class="three-squares">
<div>I'm 3:1</div>
</div>Bei Verwendung innerhalb eines Pseudo-Elements wird die <svg> wird ein ersetztes Element die standardmäßig auf einer Grundlinie mit variabler Höhe sitzt ( 4px in Chrom, 3.5px in Firefox). Die Höhe der Grundlinie variiert je nach line-height Deshalb müssen wir die line-height: 0 auf das Pseudo, um ein genaues Verhältnis zu erhalten. Mehr Details aquí .
Ich persönlich bevorzuge die Version, bei der die <svg> im Markup platziert wird, da ich eine einzelne Klasse haben kann ( .ratio ), die sich mit Behältern mit verschiedenen Verhältnissen befassen (im Gegensatz zu einer Klasse für jedes einzelne Verhältnis, das ich möglicherweise benötige).
Ich habe eine Möglichkeit gefunden, dies mit CSS zu tun, aber man muss vorsichtig sein, da es sich je nach dem Ablauf der eigenen Website ändern kann. Ich habe es so gemacht, dass ich ein Video mit einem konstanten Seitenverhältnis in einen Teil meiner Website mit fließender Breite einbetten konnte.
Nehmen wir an, Sie haben ein eingebettetes Video wie dieses:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>Sie könnten dann all dies in ein div mit der Klasse "Video" einfügen. Diese Videoklasse wird wahrscheinlich das fließende Element in Ihrer Website sein, so dass es an sich keine direkten Höhenbeschränkungen hat, aber wenn Sie die Größe des Browsers ändern, wird es sich in der Breite entsprechend dem Fluss der Website ändern. Dies ist wahrscheinlich das Element, in das Sie Ihr eingebettetes Video unter Beibehaltung eines bestimmten Seitenverhältnisses einfügen möchten.
Dazu habe ich ein Bild vor das eingebettete Objekt innerhalb der Klasse "Video" gesetzt.
!!! Wichtig ist, dass das Bild das richtige Seitenverhältnis hat, das Sie beibehalten wollen. Vergewissern Sie sich auch, dass die Größe des Bildes MINDESTENS so groß ist wie die kleinste Größe, die das Video (oder was auch immer Sie für ein Seitenverhältnis beibehalten wollen) nach Ihrem Layout haben soll. Dadurch werden mögliche Probleme bei der Auflösung des Bildes vermieden, wenn es prozentual verkleinert wird. Wenn Sie zum Beispiel ein Seitenverhältnis von 3:2 beibehalten wollen, sollten Sie nicht einfach ein Bild im Format 3 x 2 Pixel verwenden. Das kann unter Umständen funktionieren, aber ich habe es nicht getestet, und es wäre wahrscheinlich eine gute Idee, es zu vermeiden.
Wahrscheinlich haben Sie bereits eine solche Mindestbreite für fließende Elemente auf Ihrer Website festgelegt. Wenn nicht, ist es eine gute Idee, dies zu tun, um zu vermeiden, dass Elemente abgeschnitten werden oder sich überlappen, wenn das Browserfenster zu klein wird. Besser ist es, an einer bestimmten Stelle eine Bildlaufleiste einzubauen. Die kleinste Breite, die eine Webseite haben sollte, liegt bei etwa 600 Pixeln (einschließlich aller Spalten mit fester Breite), da die Bildschirmauflösungen nicht kleiner werden, es sei denn, es handelt sich um telefonfreundliche Seiten. !!!
Ich verwende ein völlig transparentes png, aber ich glaube nicht, dass es am Ende eine Rolle spielt, wenn man es richtig macht. Etwa so:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>Jetzt sollten Sie in der Lage sein, CSS ähnlich wie das folgende hinzuzufügen:
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }Stellen Sie sicher, dass Sie auch alle expliziten Höhen- oder Breitenangaben innerhalb der Objekt- und Einbettungs-Tags entfernen, die normalerweise mit kopiertem/eingefügtem Einbettungscode einhergehen.
Die Funktionsweise hängt von den Positionseigenschaften des Elements der Videoklasse und dem Element ab, das ein bestimmtes Seitenverhältnis beibehalten soll. Es macht sich die Art und Weise zunutze, wie ein Bild sein richtiges Seitenverhältnis beibehält, wenn die Größe in einem Element geändert wird. Es sagt, was auch immer in Video-Klasse-Element, um in vollem Umfang nutzen die Immobilien durch das dynamische Bild durch zwingt seine Breite / Höhe auf 100 % der Video-Klasse-Element wird durch das Bild angepasst.
Ziemlich cool, oder?
Vielleicht müssen Sie ein bisschen damit herumspielen, damit es mit Ihrem eigenen Design funktioniert, aber für mich funktioniert es überraschend gut. Das allgemeine Konzept ist vorhanden.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
