it-swarm.com.de

Behalten Sie das Seitenverhältnis eines div mit CSS bei

Ich möchte eine div erstellen, 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 lässt, , 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.

 div keeping aspect ratio according to width of window

895
jackb

Erstellen Sie einfach einen Wrapper <div> mit einem prozentualen Wert für padding-bottom wie folgt:

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}
<div></div>

Es ergibt sich ein <div> mit einer Höhe, die 75% der Breite des Containers entspricht (ein Seitenverhältnis von 4: 3).

Dies beruht auf der Tatsache, dass für das Auffüllen:

Der Prozentsatz wird in Bezug auf width des Blockes der generierten Box [...] berechnet (Quelle: w3.org , Hervorhebung meines).

Auffüllhöhenwerte 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 in das div einfügen:

Um das Seitenverhältnis des div beizubehalten und zu verhindern, dass der Inhalt des Dokuments gedehnt wird, müssen Sie ein absolut positioniertes untergeordnetes Element hinzufügen und es an den Rändern des Deckblattes 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 noch ein tiefer gehender demo

1191
Web_Designer

vw Einheiten:

Sie können vw units sowohl für width als auch height des Elements verwenden. Auf diese Weise kann das Seitenverhältnis des Elements basierend auf der Breite des Ansichtsfensters beibehalten werden.

vw: 1/100 der Breite des Ansichtsfensters. [MDN]

Alternativ können Sie auch vh für die Höhe des Ansichtsfensters oder sogar vmin/vmax verwenden, um das kleinere/größere der Ansichtsfensterdimensionen zu verwenden (Diskussion hier ).

Beispiel: 1: 1-Seitenverhältnis

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 gemäß der Breite des Elements zu berechnen:

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

Beispiel: 4x4-Raster mit quadratischen divs

body {
  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 Fiddle mit dieser Demo und hier ist eine Lösung, um ein ansprechendes Raster von Feldern mit vertikalem und horizontal zentriertem Inhalt zu erstellen .


Browserunterstützung für vh/vw-Einheiten ist IE9 + siehe canIuse für weitere Informationen

359
web-tiki

Ich habe einen Weg gefunden, dies mit CSS zu tun, aber Sie müssen vorsichtig sein, da sich dies je nach Fluss Ihrer eigenen Website ändern kann. Ich habe es getan, um Videos mit einem konstanten Seitenverhältnis in einen Bereich mit fließender Breite meiner Website einzubetten.

Angenommen, Sie haben ein eingebettetes Video wie dieses:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Sie könnten dies alles in einem Div mit einer "Video" -Klasse platzieren. Diese Videoklasse wird wahrscheinlich das fließende Element Ihrer Website sein, so dass sie an sich keine direkten Höhenbeschränkungen hat. Wenn Sie jedoch die Größe des Browsers ändern, ändert sich die Breite entsprechend dem Fluss der Website. Dies ist das Element, mit dem Sie wahrscheinlich versuchen, Ihr eingebettetes Video zu erhalten, während Sie ein bestimmtes Seitenverhältnis des Videos beibehalten.

Dazu füge ich ein Bild vor dem eingebetteten Objekt in der Klasse "Video" div. 

!!! Wichtig ist, dass das Bild das richtige Seitenverhältnis hat, das Sie beibehalten möchten. Vergewissern Sie sich außerdem, dass die Größe des Bildes AT mindestens so groß ist, wie Sie das Video (oder was auch immer Sie die A.R. von Ihnen beibehalten) auf der Grundlage Ihres Layouts erwartet. Dadurch werden mögliche Probleme bei der Auflösung des Bildes vermieden, wenn es in Prozent geändert wird. Wenn Sie beispielsweise ein Bildseitenverhältnis von 3: 2 beibehalten möchten, verwenden Sie nicht einfach ein 3px by 2px-Bild. Es funktioniert möglicherweise unter bestimmten Umständen, aber ich habe es nicht getestet, und es wäre wahrscheinlich eine gute Idee, dies zu vermeiden. 

Sie sollten wahrscheinlich bereits über eine minimale Breite verfügen, die für flüssige Elemente Ihrer Website definiert ist. Wenn nicht, sollten Sie dies tun, um zu vermeiden, dass Elemente abgeschnitten werden oder sich überschneiden, wenn das Browserfenster zu klein wird. Es ist besser, irgendwann eine Bildlaufleiste zu haben. Die kleinste Breite, die eine Webseite erhalten sollte, liegt bei ~ 600px (einschließlich Spalten mit fester Breite), da die Bildschirmauflösungen nicht geringer werden, es sei denn, es handelt sich um telefonfreundliche Websites. !!!

Ich verwende ein vollständig transparentes PNG, aber ich glaube nicht, dass es letztendlich wichtig ist, wenn Sie es richtig machen. So was:

<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 der folgenden 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 explizite Deklaration der Höhe oder Breite innerhalb des Objekts entfernen und Tags einbetten, die normalerweise mit kopiertem/eingefügten Einbettungscode geliefert werden.

Die Funktionsweise hängt von den Positionseigenschaften des Videoklassenelements ab, und das gewünschte Element muss ein bestimmtes Seitenverhältnis beibehalten. Es nutzt die Art und Weise, wie ein Bild sein korrektes Seitenverhältnis beibehält, wenn die Größe eines Elements geändert wird. Es teilt allen anderen Elementen des Videoklassenelements mit, dass es die durch das dynamische Bild bereitgestellte Fläche voll ausnutzen soll, indem die Breite/Höhe auf 100% des durch das Bild angepassten Videoklassenelements gesetzt wird. 

Ziemlich cool, wie?

Möglicherweise müssen Sie ein wenig herumspielen, damit es mit Ihrem eigenen Design funktioniert, aber das funktioniert für mich überraschend gut. Das allgemeine Konzept ist da.

25
forgo

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

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Bitte beachten Sie:background-size ist eine css3-Funktion, die mit Ihren Zielbrowsern möglicherweise nicht funktioniert. Sie können die Interoperabilität überprüfen (z. B. auf caniuse.com ).

14
florianb

Um die Antwort von Web_Designer hinzuzufügen, hat der <div> eine Höhe (die sich ausschließlich aus der unteren Auffüllung zusammensetzt) ​​von 75% der Breite des enthaltenden Elements. Hier eine gute Zusammenfassung: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Ich bin 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 Umbruch-Div, in dem Sie die Breite festlegen können:

div.ar-outer{
    width: 60%; /* container; whatever width you want */
    margin: 0 auto; /* centered if you like */
}
div.ar {
    width:100%; /* 100% of width of container */
    padding-bottom: 75%; /* 75% of width of container */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

Ich habe kürzlich einen ähnlichen Elliot-Image-Trick verwendet, um CSS-Medienabfragen verwenden zu können, um je nach Geräteauflösung eine andere Logodatei zu liefern, aber trotzdem proportional skalieren, wie es ein <img> tun würde (natürlich setze ich das Logo als Hintergrundbild auf transparent. png mit dem richtigen Seitenverhältnis). Aber die Lösung von Web_Designer würde mir eine http-Anfrage ersparen.

13
nabrown

Wie in hier auf w3schools.com angegeben und etwas in dieser akzeptierten Antwort , Padding-Werte als Prozentsätze (Hervorhebung meiner):

Gibt den Abstand in Prozent der Breite des enthaltenden Elements an.

Ein korrektes Beispiel für ein responsives DIV, das ein Seitenverhältnis von 16: 9 beibehält, lautet daher wie folgt:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is kept when resizing</div>
    </div>
</div>

Demo auf JSFiddle

11
Marc A

Basierend auf Ihren Lösungen habe ich einige Tricks gemacht:

Wenn Sie es verwenden, wird nur Ihr HTML verwendet

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

Um es auf diese Weise zu benutzen, machen Sie: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

und js (jQuery)

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

Und damit haben Sie attr data-keep-ratio auf height/width gesetzt und das war's.

8
pie6k

Sie können eine SVG verwenden. Stellen Sie die Container-/Wrapper-Position relativ ein, setzen Sie das svg zuerst als statisch positioniert und dann absolut positionierten Inhalt (oben: 0; links: 0; rechts: 0; unten: 0;).

Beispiel mit 16: 9 Proportionen:

image.svg: (kann in src eingebettet werden)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

CSS:

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

HTML:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

Beachten Sie, dass Inline-svg nicht zu funktionieren scheint, aber Sie können das svg umlernen und in das Attribut img src wie folgt einbetten:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
7
Maciej Krawczyk

Da @ web-tiki bereits einen Weg zur Verwendung von vh/vw zeigt, brauche ich auch einen Weg, um im Bildschirm zu zentrieren. Hier ist ein Snippet-Code für 9:16 Porträt.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

translateY behält diese Mitte auf dem Bildschirm. calc(100vw * 16 / 9) ist die erwartete Höhe für 9/16. (100vw * 16 / 9 - 100vh) ist die Überlaufhöhe. Ziehen Sie also overflow height/2 nach oben, um sie auf dem Bildschirm in der Mitte zu halten.

Für Querformat und halten Sie 16: 9 , zeigen Sie die Verwendung

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

Das Verhältnis 9/16 ist einfach zu ändern, es muss weder 100:56.25 Noch 100:75 Vordefiniert werden. Wenn Sie zuerst die Höhe sicherstellen möchten, sollten Sie Breite und Höhe wechseln, z. height:100vh;width: calc(100vh * 9 / 16) für 9:16 Hochformat.

Wenn Sie für unterschiedliche Bildschirmgrößen angepasst werden möchten, könnten Sie auch interessiert sein

  • Hintergrundgröße cover/contain
    • Der obige Stil ist ähnlich zu enthalten, hängt vom Verhältnis von Breite zu Höhe ab.
  • Objektanpassung
    • cover/contain für img/video tag
  • @media (orientation: portrait)/@media (orientation: landscape)
    • Medienabfrage für portrait/landscape, um das Verhältnis zu ändern.
7
wener

Dies ist eine Verbesserung der akzeptierten Antwort:

  • Verwendet Pseudo-Elemente anstelle von Wrapper-Divs
  • Das Seitenverhältnis bezieht sich auf die Breite der Box anstelle des übergeordneten Elements
  • Die Box wird vertikal gestreckt, wenn der Inhalt höher wird

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

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

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

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}
<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

7
Salman A

SCSS ist in meinem Fall die beste Lösung. mit einem Datenattribut:

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;

    &:before {
        content: '';
        display: block;
    }

    > * {
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
}
[data-aspect-ratio="3:1"]:before {
    padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

Zum Beispiel :

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

Quelle

4
gordie

nehmen wir an, Sie haben 2 Divs. Das Äußere Div ist ein Container und das Innere kann jedes Element sein, das Sie benötigen, um das Verhältnis zu halten (img oder ein youtube-iframe oder was auch immer).

hTML sieht so aus: 

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

sagen wir, Sie müssen das Verhältnis des "Elements" beibehalten. 

verhältnis => 4 zu 1 oder 2 zu 1 ...

cSS sieht so aus 

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

wenn in% angegeben wird, wird die Auffüllung auf der Basis der Breite und nicht der Höhe berechnet. Daher ist es egal, auf welcher Breite die Höhe immer auf dieser Basis berechnet wird. das wird das Verhältnis halten. 

3
aeid

Während die meisten Antworten sehr cool sind, müssen die meisten von ihnen bereits ein Bild mit der richtigen Größe haben. 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 auch den Inhalt in einer bestimmten Höhe anpassen .

Ich habe versucht, sie miteinander zu verbinden, um eine vollständig tragbare und anpassbare Lösung zu schaffen ... Der Trick besteht darin, ein Bild automatisch zu skalieren, aber ein Inline-svg-Element anstelle eines vorgerenderten Bildes oder einer beliebigen Form von zweite HTTP-Anfrage ...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}
<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

Beachten Sie, dass ich große Werte in den Breiten- und Höhenattributen der SVG-Datei verwendet habe, da sie größer als die maximal erwartete Größe sein muss, da sie nur verkleinern kann. Das Beispiel macht das div-Verhältnis 10: 5

2
Salketer

Nur eine Idee oder ein Hack.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}
<div>
  <!-- use an image with target aspect ratio. sample is a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

2
Orland

Wenn Sie ein Quadrat im Ansichtsfenster im Hoch- oder Querformat (so groß wie möglich, aber nichts außerhalb) anbringen möchten, wechseln Sie zwischen vw/vh und Orientierung portrait/landscape:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 
1
MoonLite

Ich bin schon einige Male auf dieses Problem gestoßen, also habe ich eine JS-Lösung dafür gemacht. Dadurch wird im Allgemeinen die Höhe des domElement entsprechend der von Ihnen angegebenen Ratio an die Breite des Elements angepasst. Sie könnten es wie folgt verwenden:

<div ratio="4x3"></div>

Bitte beachten Sie, dass das Element entweder display:block oder display:inline-block sein sollte, da es die Höhe des Elements einstellt.

https://github.com/JeffreyArts/html-ratio-component

1
user007

Sagen Sie, dass Sie Width: 100px und Height: 50px (d. H. 2: 1) beibehalten möchten

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
0
Syed

Ich möchte meine Lösung teilen, bei der ich ein img- -Tag habe, das ein bestimmtes Seitenverhältnis ausfüllt. Ich konnte background 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 nicht wie bei einigen Lösungen eine feste Größe festgelegt werden muss. Es wird ansprechend skaliert!

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}
<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>
0
LaVomit

Sie können das Flux-Layout (FWD) verwenden.

https://en.wikipedia.org/wiki/Adaptive_web_design

Es wird das Layout skalieren 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/

0
user1410288

Ich stolperte über eine intelligente Lösung mit <svg> und display:grid

Mit dem Rasterelement können Sie den gleichen Raum mit zwei (oder mehr) Elementen belegen, ohne dass Sie angeben müssen, welches die Höhe einstellt. Was bedeutet, dass der Größere das Verhältnis einstellt.

Das bedeutet, Sie können es so verwenden, wie es ist, wenn Sie wissen, dass der Inhalt nie groß genug ist, um das gesamte "Verhältnis" zu füllen, und Sie suchen lediglich nach einer Möglichkeit, den Inhalt in diesem Bereich zu positionieren (dh ihn in beide Richtungen zu zentrieren) display:flex; align-items:center; justify-content:center).
Es ist fast dasselbe wie wenn Sie einen transparenten <img> mit display:block und einem vorbestimmten Verhältnis verwenden, mit der Ausnahme, dass <svg> leichter und wesentlich einfacher zu ändern ist (um das Verhältnis ansprechend zu ändern, falls Sie dies benötigen).

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>
.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

Alles was Sie tun müssen, ist das <svg>s-Verhältnis zu ändern:

  • <svg viewBox="0 0 4 3"></svg>
  • <svg viewBox="0 0 16 9"></svg>

Sehen Sie es funktioniert: 

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1/1/1;
}

/* below code NOT needed for setting the ratio 
 * I just wanted to mark it visually
 * and center contents
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}
<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 das Verhältnis nicht festlegen darf, wenn es größer ist (mit ausgeblendetem Überlauf oder automatischem Überlauf), müssen Sie position:relative im Raster und position:absolute; height:100%; overflow-y: auto; für den Inhalt festlegen. Beispiel: 

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1/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 1"></svg>
  <div>
    <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>

0