Nachdem ich einige Zeit mit diesem Problem herumgespielt hatte, stellte ich fest, dass dies kein Problem mit dem Rasterlayout ist.
Da Sie nie definieren Höhe / max-height oder Breite / max-width für SVG, was berechnet wird, ist width:autoundheight:auto
Hinweis: Ich spreche max-height / max-width an, da diese Vorrang vor den Werten für width / height haben.
Nun, warum Ihre Landschaft Layout - Arbeiten und Ihr Porträt Layout nicht funktionieren? Weil die Breite Vorrang vor Ihrer Höhe hat.
Aus diesem Grund basiert im Blocklayout eine automatische Höhe auf der Gesamthöhe der Nachkommen und eine automatische Breite auf der enthaltenen Blockbreite.
Quelle - Warum verhält sich width: auto anders als height: auto?
Dies bedeutet, dass Ihre SVG die widthaus ihrem Container und die heightvon ihren Nachkommen nimmt.
In Ihrem Beispiel hat Ihre SVG keine Nachkommen, sondern ein übergeordnetes Element mit einer definierten maximalen Breite . Aber was bedeutet das für die Größe der SVG ?
Die SVG berechnet ihre Höhe anhand des Intrisic Ratio:
Wenn die 'viewBox' im 'svg'-Element korrekt angegeben ist:
- Lassen Sie viewbox das Ansichtsfeld sein, das durch das Attribut 'viewBox' im Element 'svg' definiert ist
- return viewbox.width / viewbox.height
Quelle
Und Ihr intrisisches Verhältnis ist 1/1 = 1
Also zwingst du deine height=width
Die Lösungen)
Die Lösung besteht darin, ein widthoder a marginfür Ihre SVG festzulegen, abhängig vom Anteil Ihres übergeordneten Div.
In dem Beispiel, das Sie gegeben haben, haben Sie ein Verhältnis von 2: 1, also sollte Ihr SVG width:50%oder haben margin: 0 25%.
Dies bedeutet, dass Sie, wenn Sie einen anderen Anteil einstellen möchten, diese entsprechend anpassen müssen (siehe Porträt-1-3 im folgenden Code).
Das Festlegen einer CSS-Regel für jeden Anteil kann vermieden werden, wenn dies heightkeine Einschränkung darstellt, da Sie eine widthfür Ihre SVG und Ihren Container definieren können, sodass die Elemente die anpassen könnenheight , um Ihr Seitenverhältnis beizubehalten.
Ich habe auch das letzte Beispiel hinzugefügt, wenn es jemandem nicht wichtig ist, das Seitenverhältnis beizubehalten, sondern das SVG in einem Satz heightund einem widthContainer enthalten muss.
.container {
display: grid;
background-color: greenyellow;
margin: 5px;
min-height: 10px;
min-width: 10px;
}
.portrait {
max-height: 100px;
max-width: 200px;
}
/* Add 25% margin left and right to center the image OR set the image width to 50% */
.portrait>.aspect-ratio {
margin: 0 25%;
/*
or
width:50%;
*/
}
.landscape {
max-height: 200px;
max-width: 100px;
}
.aspect-ratio {
grid-column: 1;
grid-row: 1;
background-color: deeppink;
border-radius: 50%;
align-self: center;
justify-self: center;
}
/* Set fixed max-height and max-width rule (33% proportion) */
.portrait-1-3 {
max-height: 100px;
max-width: 300px;
}
/* Align image with the new proportion */
.portrait-1-3>.aspect-ratio {
margin: 0 33.33%;
/*
or
width:33.3%;
*/
}
/* Removed max-height and let the container adjust the height according to the max-width rule and the proportion set */
.portrait-any-height {
max-width: 400px;
}
/* Height will be adjusted through the width/margin defined here, so 10% width will correspond to 40px of height (10%*400px)*(aspect ratio=1)*/
.portrait-any-height>.aspect-ratio {
width:10%;
}
/* Set fixed max-height and max-width rule (proportion doesn't matter) */
.portrait-squeezed {
max-height: 100px;
max-width: 300px;
}
/* Make sure SVG complies with the the given max with and height (squeezing your svg) */
.portrait-squeezed>.aspect-ratio {
max-height: inherit;
max-width: inherit;
}
<div class="container landscape">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait-1-3">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait-any-height">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait-squeezed">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
Beachten Sie, dass ich mit SVGs nicht sehr gut arbeite und diese Antwort ein Ergebnis von Forschung und viel Experimentieren ist! Ich würde mich über Anpassungen und / oder Korrekturen meiner Antwort freuen.
