html - SVG圆应适应CSS网格高度而不会重叠

Question

在以下示例中，圆适应网格宽度并保持其长宽比。
随着容器宽度的缩小，圆圈也随之缩小...

但是，当高度小于宽度时(第二个框)，圆不会收缩，而是重叠在网格外部
有没有办法在保持宽高比的同时使其适应高度？

.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>

结果应如下所示:

Answer 1

经过一段时间摆弄这个问题后，我发现这不是网格布局的问题。
由于您从未为SVG定义高度/最大高度或宽度/最大宽度，因此要计算的是width:auto和height:auto 注意:我调出 max-height/max-width ，因为这些优先于宽度/高度值。

那么，为什么现在您的风景布局不能工作，而肖像布局却不能工作呢？
因为宽度是您高度的“重中之重”。

And that's why, in block layout, an auto height is based on the total height of descendants and an auto width is based on the containing block width.

Source - Why does width:auto behave differently than height:auto?
这意味着您的SVG正在从其容器中获取 width，并从其后代中获取 height。
在您的示例中，您的SVG没有后代，但是其父代定义了 max-width 。
但是，这对于SVG的 高度意味着什么？
SVG正在通过本征比计算它的高度:

If the ‘viewBox’ on the ‘svg’ element is correctly specified:

1. let viewbox be the viewbox defined by the ‘viewBox’ attribute on the ‘svg’ element
2. return viewbox.width / viewbox.height

Source
您的本征比是 1/1 = 1
所以你要强制你的 height=width
解决方案
解决方案是根据父div的比例为SVG设置 width或 margin。
在您给出的示例中，您的比例为2:1，因此您的SVG应该具有 width:50%或 margin: 0 25%。
这意味着，如果要设置其他比例，则必须进行相应的调整(请参见下面的代码中的portrait1-3)。
如果 height不受限制，则可以避免为每个比例设置CSS规则，因为您可以为SVG和容器定义 width，让元素调整 height以保持宽高比。
如果有人不关心保持宽高比，但需要将SVG包含在 height和 width集合容器中，则我还添加了最后一个示例。

.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的使用不是很熟练，这是研究和大量实验的结果!
我很高兴收到对我的回复的任何调整和/或更正。