Ich möchte eine erstellen div
, die ihre Breite / Höhe ändern kann, wenn sich die Breite des Fensters ändert.
Gibt es CSS3-Regeln, nach denen sich die Höhe entsprechend der Breite ändern kann, während das Seitenverhältnis beibehalten wird ?
Ich weiß, dass ich dies über JavaScript tun kann, aber ich würde es vorziehen, nur CSS zu verwenden.
Antworten:
Erstellen Sie einfach einen Wrapper
<div>
mit einem Prozentwert fürpadding-bottom
:Dies führt zu einer
<div>
Höhe von 75% der Breite des Behälters (ein Seitenverhältnis von 4: 3).Dies beruht auf der Tatsache, dass für die Polsterung:
Padding-Bottom-Werte für andere Seitenverhältnisse und 100% Breite:
Platzieren von Inhalten in der div:
Um das Seitenverhältnis des Div beizubehalten und zu verhindern, dass sein Inhalt es dehnt, müssen Sie ein absolut positioniertes Kind hinzufügen und es an den Rändern des Wrappers strecken mit:
Hier ist eine Demo und eine weitere ausführlichere Demo
quelle
vw
Einheiten:Sie können
vw
Einheiten sowohl für die Breite als auch für die Höhe des Elements verwenden. Dadurch kann das Seitenverhältnis des Elements basierend auf der Breite des Ansichtsfensters beibehalten werden.Alternativ können Sie auch
vh
für Darstellungshöhe oder sogarvmin
/vmax
die weniger / mehr im Darstellungs Dimensionen zu verwenden (Diskussion hier ).Beispiel: Seitenverhältnis 1: 1
Für andere Seitenverhältnisse können Sie die folgende Tabelle verwenden, um den Wert für die Höhe entsprechend der Breite des Elements zu berechnen:
Beispiel: 4x4-Raster aus quadratischen Divs
Hier ist eine Geige mit dieser Demo und hier ist eine Lösung, um ein ansprechendes Quadratraster mit vertikal und horizontal zentriertem Inhalt zu erstellen .
Browser-Unterstützung für vh / vw-Einheiten ist IE9 + siehe canIuse für weitere Informationen
quelle
width:50%
undheight:50vw
die Höhe etwas größer als die Breite ist, also nicht gerade ein 1: 1-Verhältnis. Irgendwelche Ideen?Ich habe einen Weg gefunden, dies mit CSS zu tun, aber Sie müssen vorsichtig sein, da es sich je nach Ablauf Ihrer eigenen Website ändern kann. Ich habe es getan, um Videos mit einem konstanten Seitenverhältnis in einen Bereich mit flüssiger Breite meiner Website einzubetten.
Angenommen, Sie haben ein eingebettetes Video wie dieses:
Sie könnten dies alles in einem Div mit einer "Video" -Klasse platzieren. Diese Videoklasse wird wahrscheinlich das fließende Element auf Ihrer Website sein, sodass es für sich genommen keine direkten Höhenbeschränkungen gibt. Wenn Sie jedoch die Größe des Browsers ändern, ändert sich die Breite entsprechend dem Fluss der Website. Dies ist das Element, in das Sie wahrscheinlich versuchen, Ihr eingebettetes Video zu integrieren, während Sie ein bestimmtes Seitenverhältnis des Videos beibehalten.
Zu diesem Zweck habe ich ein Bild vor das eingebettete Objekt innerhalb der Klasse "Video" div gesetzt.
!!! Der wichtige Teil ist, dass das Bild das richtige Seitenverhältnis hat, das Sie beibehalten möchten. Stellen Sie außerdem sicher, dass die Größe des Bildes MINDESTENS so groß ist wie die kleinste, von der Sie erwarten, dass das Video (oder was auch immer Sie den AR beibehalten) basierend auf Ihrem Layout erhalten wird. Dadurch werden potenzielle Probleme bei der Auflösung des Bilds vermieden, wenn die Größe in Prozent geändert wird. Wenn Sie beispielsweise ein Seitenverhältnis von 3: 2 beibehalten möchten, verwenden Sie nicht nur ein 3 x 2 Pixel großes Bild. Es kann unter bestimmten Umständen funktionieren, aber ich habe es nicht getestet, und es wäre wahrscheinlich eine gute Idee, dies zu vermeiden.
Sie sollten wahrscheinlich bereits eine Mindestbreite wie diese für flüssige Elemente Ihrer Website definiert haben. 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. Es ist besser, irgendwann eine Bildlaufleiste zu haben. Die kleinste Breite, die eine Webseite erhalten sollte, liegt bei etwa 600 Pixel (einschließlich Spalten mit fester Breite), da die Bildschirmauflösungen nur dann kleiner werden, wenn Sie mit telefonfreundlichen Websites arbeiten. !!!
Ich verwende ein vollständig transparentes PNG, aber ich denke nicht, dass es wichtig ist, wenn Sie es richtig machen. So was:
Jetzt sollten Sie in der Lage sein, CSS ähnlich dem folgenden hinzuzufügen:
Stellen Sie sicher, dass Sie auch alle expliziten Höhen- oder Breitendeklarationen innerhalb des Objekts entfernen und Tags einbetten, die normalerweise mit kopiertem / eingefügtem Einbettungscode geliefert werden.
Die Funktionsweise hängt von den Positionseigenschaften des Videoklassenelements ab, und das gewünschte Element hat ein bestimmtes Seitenverhältnis. Es nutzt die Art und Weise, wie ein Bild sein korrektes Seitenverhältnis beibehält, wenn die Größe in einem Element geändert wird. Es weist an, was sich sonst noch im Videoklassenelement befindet, um die durch das dynamische Bild bereitgestellte Fläche voll auszunutzen, indem seine Breite / Höhe auf 100% des vom Bild angepassten Videoklassenelements erzwungen wird.
Ziemlich cool, oder?
Möglicherweise müssen Sie ein wenig damit herumspielen, damit es mit Ihrem eigenen Design funktioniert, aber das funktioniert für mich überraschend gut. Das allgemeine Konzept ist da.
quelle
Elliot hat mich zu dieser Lösung inspiriert - danke:
aspectratio.png
ist eine vollständig transparente PNG-Datei mit der Größe Ihres bevorzugten Seitenverhältnisses, in meinem Fall 30x10 Pixel.HTML
CSS3
Bitte beachten Sie:
background-size
ist eine CSS3-Funktion, die möglicherweise nicht mit Ihren Zielbrowsern funktioniert. Sie können die Interoperabilität überprüfen ( z . B. auf caniuse.com ).quelle
Um die Antwort von Web_Designer zu ergänzen, hat der
<div>
eine Höhe (die vollständig aus der unteren Polsterung besteht) von 75% der Breite des enthaltenen Elements . Hier ist eine gute Zusammenfassung: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Ich bin mir nicht sicher, warum das so sein sollte, aber so ist es.Wenn Sie möchten, dass Ihr Div eine andere Breite als 100% hat, benötigen Sie ein anderes Wrapping-Div, auf dem Sie die Breite festlegen können:
Ich habe kürzlich etwas Ähnliches wie Elliots Bildtrick verwendet, um CSS-Medienabfragen zu verwenden, um je nach Geräteauflösung eine andere Logodatei bereitzustellen, aber trotzdem proportional zu skalieren, wie
<img>
es natürlich der Fall wäre (ich habe das Logo als Hintergrundbild auf eine transparente PNG- Datei gesetzt mit dem richtigen Seitenverhältnis). Die Lösung von Web_Designer würde mir jedoch eine http-Anfrage ersparen.quelle
Wie hier auf w3schools.com angegeben und in dieser akzeptierten Antwort etwas wiederholt , werden die Werte als Prozentsätze aufgefüllt (Hervorhebung von mir):
Ergo ist ein korrektes Beispiel für ein responsives DIV, das ein Seitenverhältnis von 16: 9 beibehält, wie folgt:
CSS
HTML
Demo auf JSFiddle
quelle
Da @ web-tiki bereits eine Möglichkeit zur Verwendung von
vh
/ zeigtvw
, brauche ich auch eine Möglichkeit, den Bildschirm zu zentrieren . Hier ist ein Snippet-Code für das 9: 16- Porträt.translateY
behält diese Mitte auf dem Bildschirm.calc(100vw * 16 / 9)
wird Höhe für 9/16 erwartet.(100vw * 16 / 9 - 100vh)
Wenn die Überlaufhöhe beträgt,overflow height/2
bleibt sie beim Hochziehen mittig auf dem Bildschirm.Für Landschaft und 16: 9 zeigen Sie Verwendung
Das Verhältnis 9/16 ist leicht zu ändern, muss nicht vordefiniert werden
100:56.25
oder.100:75
Wenn Sie zuerst die Höhe sicherstellen möchten, sollten Sie Breite und Höhe wechseln, zheight:100vh;width: calc(100vh * 9 / 16)
. B. für 9:16 Porträt.Wenn Sie für unterschiedliche Bildschirmgrößen angepasst werden möchten, könnten Sie auch interessiert sein
@media (orientation: portrait)
/.@media (orientation: landscape)
portrait
/landscape
zum Ändern des Verhältnisses.quelle
Dies ist eine Verbesserung gegenüber der akzeptierten Antwort:
quelle
Ich bin auf eine intelligente Lösung mit
<svg>
und gestoßendisplay:grid
.Mit dem Rasterelement können Sie denselben Raum mit zwei (oder mehr) Elementen belegen, ohne angeben zu müssen, welches die Höhe festlegt. Was bedeutet, dass sofort das größere Verhältnis festgelegt wird .
Dies bedeutet, dass Sie es so verwenden können, wie es ist, wenn Sie wissen, dass der Inhalt niemals groß genug sein wird, um das gesamte "Verhältnis" auszufüllen, und Sie einfach nach einer Möglichkeit suchen, den Inhalt in diesem Bereich zu positionieren (dh ihn in beide Richtungen zu zentrieren)
display:flex; align-items:center; justify-content:center
).Es ist so ziemlich das Gleiche wie die Verwendung eines transparenten Verhältnisses
<img>
mitdisplay:block
und eines vorgegebenen Verhältnisses, außer dass das Verhältnis<svg>
leichter und wesentlich einfacher zu ändern ist (um das Verhältnis bei Bedarf entsprechend zu ändern).Alles was Sie tun müssen, ist das zu ändern
<svg>
s-Verhältnis :<svg viewBox="0 0 4 3"></svg>
<svg viewBox="0 0 16 9"></svg>
Sehen Sie, wie es funktioniert:
Code-Snippet anzeigen
Wenn Sie eine Lösung benötigen, bei der das Inhaltselement das Verhältnis nicht festlegen darf, wenn es größer ist (mit ausgeblendetem oder automatischem Überlauf), müssen Sie festlegen
position:relative
im Raster undposition:absolute; height:100%; overflow-y: auto;
im Inhalt . Beispiel:Code-Snippet anzeigen
quelle
Basierend auf Ihren Lösungen habe ich einen Trick gemacht:
Wenn Sie es verwenden, wird nur Ihr HTML sein
Um es auf diese Weise zu verwenden, machen Sie: CSS:
und js (jQuery)
Und wenn Sie dies haben, setzen Sie attr einfach
data-keep-ratio
auf Höhe / Breite und das wars .quelle
data-keep-ratio
nicht verwendenkeep-ratio
und seinen Wert erhalten mit$(this).data('keep-ratio');
Sie können ein SVG verwenden. Machen Sie die Position des Containers / Wrappers relativ, setzen Sie das SVG zuerst als statisch positioniert und dann als absolut positionierten Inhalt (oben: 0; links: 0; rechts: 0; unten: 0;)
Beispiel mit 16: 9 Proportionen:
image.svg: (kann in src eingefügt werden)
CSS:
HTML:
Beachten Sie, dass Inline-SVG anscheinend nicht funktioniert. Sie können das SVG jedoch urlencodieren und wie folgt in das Attribut img src einbetten:
quelle
SCSS ist in meinem Fall die beste Lösung. Verwenden eines Datenattributs:
Beispielsweise :
Quelle
quelle
[data-aspect-ratio]
Attributauswahl steht Ihnen in CSS zur Verfügung.Während die meisten Antworten sehr cool sind, müssen die meisten ein Bild haben, das bereits die richtige Größe hat ... Andere Lösungen funktionieren nur für eine Breite und kümmern sich nicht um die verfügbare Höhe, aber manchmal möchten Sie den Inhalt auch in eine bestimmte Höhe einpassen .
Ich habe versucht, sie miteinander zu koppeln, um eine vollständig portable und anpassbare Lösung zu erhalten ... Der Trick besteht darin, ein Bild automatisch zu skalieren, aber ein Inline-SVG-Element zu verwenden, anstatt ein vorgerendertes Bild oder eine andere Form von zu verwenden zweite HTTP-Anfrage ...
Beachten Sie, dass ich große Werte in den Attributen width und height des SVG verwendet habe, da es größer sein muss als die maximal erwartete Größe, da es nur schrumpfen kann. Das Beispiel macht das Div-Verhältnis 10: 5
quelle
Nur eine Idee oder ein Hack.
quelle
Nehmen wir an, Sie haben 2 Divs. Das äußere Div ist ein Container und das innere könnte ein beliebiges Element sein, das Sie benötigen, um sein Verhältnis beizubehalten (img oder ein Youtube-Iframe oder was auch immer).
HTML sieht so aus:
Angenommen, Sie müssen das Verhältnis des "Elements" beibehalten.
Verhältnis => 4 zu 1 oder 2 zu 1 ...
CSS sieht so aus
Auffüllen, wenn in% angegeben, wird es basierend auf der Breite und nicht auf der Höhe berechnet. .. also im Grunde ist es dir egal, wie breit deine Höhe ist, es wird immer basierend darauf berechnet. das wird das Verhältnis halten.
quelle
Wenn Sie ein Quadrat in das Ansichtsfenster im Hoch- oder Querformat einfügen möchten (so groß wie möglich, aber nichts bleibt außen), wechseln Sie zwischen
vw
/vh
on Ausrichtungportrait
/landscape
:quelle
Ich möchte meine Lösung teilen, bei der ein
img
Tag ein bestimmtes Seitenverhältnis ausfüllt. Ich konnte esbackground
wegen mangelnder Unterstützung des CMS nicht verwenden und würde es nicht vorziehen, ein Style-Tag wie das folgende zu verwenden :<img style="background:url(...)" />
. Außerdem beträgt die Breite 100%, sodass sie nicht wie bei einigen Lösungen auf eine feste Größe eingestellt werden muss. Es wird reaktionsschnell skaliert!quelle
Ich bin schon einige Male auf dieses Problem gestoßen, deshalb habe ich eine JS-Lösung dafür entwickelt. Dadurch wird die Höhe des domElement grundsätzlich entsprechend der Breite des Elements um das von Ihnen angegebene Verhältnis angepasst. Sie können es wie folgt verwenden:
<div ratio="4x3"></div>
Bitte beachten Sie, dass das Element entweder ein
display:block
oder sein sollte, da es die Höhe des Elements festlegtdisplay:inline-block
.https://github.com/JeffreyArts/html-ratio-component
quelle
Sie können dies mit SVG erreichen.
Es hängt von einem Fall ab, aber in einigen ist es wirklich nützlich. Als Beispiel - Sie können festlegen,
background-image
ohne eine feste Höhe festzulegen, oder es verwenden, um YouTube<iframe>
mit Verhältnis16:9
und einzubettenposition:absolute
usw.Für
3:2
Verhältnis eingestelltviewBox="0 0 3 2"
und so weiter.Beispiel:
quelle
Angenommen, Sie möchten die Breite: 100px und die Höhe: 50px (dh 2: 1) beibehalten. Führen Sie einfach folgende Berechnungen durch:
quelle
Sie können das Flusslayout (FWD) verwenden.
https://en.wikipedia.org/wiki/Adaptive_web_design
Das Layout wird skaliert und beibehalten. Es ist etwas komplex, ermöglicht jedoch die Größenänderung einer Seite, ohne den Inhalt wie (RWD) zu verschieben.
Es sieht aus wie reaktionsschnell, aber es skaliert. https://www.youtube.com/watch?v=xRcBMLI4jbg
Die CSS-Skalierungsformel finden Sie hier:
http://plugnedit.com/pnew/928-2/
quelle
Eine einfache Möglichkeit, das Seitenverhältnis mithilfe des Canvas-Elements beizubehalten.
Versuchen Sie, die Größe des Div unten zu ändern, um es in Aktion zu sehen.
Für mich hat dieser Ansatz am besten funktioniert, daher teile ich ihn mit anderen, damit auch sie davon profitieren können.
Funktioniert auch mit dynamischer Höhe!
quelle
Ich habe eine neue Lösung verwendet.
Zum Hauptseitenverhältnis
Dies bezieht sich jedoch auf das gesamte Ansichtsfenster. Wenn Sie also ein Div benötigen, das 30% der Breite des Ansichtsfensters beträgt, können Sie stattdessen 30vw verwenden. Da Sie die Breite kennen, können Sie sie in der Höhe mit calc und vw wiederverwenden.
quelle
Nun, wir haben kürzlich die Möglichkeit erhalten, die
aspect-ratio
Eigenschaft in CSS zu verwenden.https://twitter.com/Una/status/1260980901934137345/photo/1
Hinweis: Support ist noch nicht der beste ...
https://caniuse.com/#search=aspect-ratio
quelle
Wenn die gesamte Container-Struktur prozentual wäre, wäre dies das Standardverhalten. Können Sie ein spezifischeres Beispiel angeben?
Im Folgenden finden Sie ein Beispiel dafür, was ich meine: Wenn Ihre gesamte übergeordnete Hierarchie auf% basiert, würde jede Anpassung des Browserfensters ohne zusätzliche JS / CSS funktionieren. Ist dies bei Ihrem Layout nicht möglich?
quelle