この問題をしばらく試してみたところ、グリッドレイアウトの問題ではないことがわかりました。
あなたが定義することはありませんので、高さ/最大高さや幅/最大幅をあなたのSVGのために、計算されているものがあるwidth:autoとheight:auto
注：max-height / max-widthは幅/高さの値よりも優先されるため、ここで取り上げます。
それでは、なぜ横向きレイアウトが機能し、縦向きレイアウトが機能しないのですか？なぜなら、幅は身長よりも「優先される」からです。
そのため、ブロックレイアウトでは、自動高さは子孫の合計の高さに基づいており、自動幅はそれを含むブロックの幅に基づいています。
ソース-width：autoの動作がheight：autoと異なるのはなぜですか？
これは、SVGがwidthコンテナとheightその子孫からを取得していることを意味します。
この例では、SVGには子孫はありませんが、定義されたmax-widthを持つ親があります。しかし、これはSVGの高さに対して何を意味するのでしょうか。
SVGは、本質的な比率から高さを計算しています。
「svg」要素の「viewBox」が正しく指定されている場合：
- viewboxを 'svg'要素の 'viewBox'属性で定義されたビューボックスにする
- viewbox.width / viewbox.heightを返す
ソース
そして、あなたの本質的な比率は1/1 = 1です
だからあなたはあなたを強制している height=width
ソリューション
解決策は、親divの比率に応じてSVGにa widthまたはa marginを設定することです。
あなたが与えた例では、あなたは2：1の比率を持っているので、あなたのSVGはwidth:50%またはを持っているべきmargin: 0 25%です。
つまり、別の比率を設定する場合は、それに応じて調整する必要があります（以下のコードのportrait-1-3を参照）。
がheight制約でない場合、各比率にCSSルールを設定することは回避できwidthます。SVGとコンテナーにを定義し、要素にを調整heightさせてアスペクト比を維持できるからです。
アスペクト比を維持する必要はないが、セットheightとwidthコンテナにSVGを含める必要がある場合の最後の例も追加しました。
.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>
私はSVGでの作業にあまり熟達していないことに注意してください。この応答は研究と多くの実験の結果です！返信に対する調整や修正があれば喜んでお送りします。
