Im folgenden Beispiel passt sich der Kreis an die Rasterbreite an und behält sein Seitenverhältnis bei. Wenn die Behälterbreite kleiner wird, schrumpfen die Kreise mit ...
Wenn die Höhe jedoch kleiner als die Breite ist (zweites Feld), verkleinert sich der Kreis nicht außerhalb des Rasters. Gibt es eine Möglichkeit, ihn auch an die Höhe anzupassen, während das Seitenverhältnis beibehalten wird?
.container {
display: grid;
background-color: greenyellow;
margin: 5px;
min-height: 10px;
min-width: 10px;
}
.portrait {
max-height: 100px;
max-width: 200px;
}
.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;
}<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>Das Ergebnis sollte folgendermaßen aussehen:
Antworten:
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:autoHinweis: 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.
Quelle - Warum verhält sich width: auto anders als height: auto?
Dies bedeutet, dass Ihre SVG die
widthaus ihrem Container und dieheightvon 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:
Quelle
Und Ihr intrisisches Verhältnis ist 1/1 = 1
Also zwingst du deine
height=widthDie Lösungen)
Die Lösung besteht darin, ein
widthoder amarginfü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 habenmargin: 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 einewidthfü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 einemwidthContainer enthalten muss.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.
quelle
Fügen Sie dem Container die spezifische Höhe und Breite neben der maximalen Höhe und der maximalen Breite hinzu.
vw & vh-Einheiten können verwendet werden, um dieses Layout flexibler zu gestalten.
Auf diese Weise ist es möglich,
max-width: 100%; max-height: 100%;das SVG einzustellen und es wird sich nicht überlappen.-BEARBEITEN-
Da das SVG-Ansichtsfeld bereits mit dem richtigen Seitenverhältnis gerendert wurde, ist es sicher, den SVG-Hintergrund innerhalb des SVG selbst zu verschieben, um das erwartete Ergebnis zu erzielen: Ein Cicle-Tag reicht aus.
Ist es möglich, den Randradius mit einem anderen Kreistag innerhalb einer Maske zu imitieren?
Alle anderen Elemente des SVG sollten dann in einer maskierten Gruppe platziert werden. dh:
<g mask="url(#mask)">quelle