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

Question

bounty到期在2天内。该问题的答案有资格获得+ 50声望赏金。Michaël Vanderheyden正在寻找规范答案。

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

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

.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定义height / max-height或width / max-width，所以正在计算的是width:auto和height:auto

注意：我调出max-height / max-width，因为这些优先于width / height值。

---

现在，为什么您的landscape布局有效而您的portrait布局却无效？因为宽度比高度要“优先”。

这就是为什么在块布局中，自动高度基于子代的总高度，而自动宽度基于包含的块的宽度。

Source - Why does width:auto behave differently than height:auto?

这意味着您的SVG正在从其容器中获取width，并从其后代中获取height。

在您的示例中，您的SVG没有后代，但具有定义为max-width的父代。但这对SVG的height意味着什么？

SVG正在通过本征比计算其高度：

如果正确指定了“ svg”元素上的“ viewBox”：

1. 让viewbox为'svg'元素上'viewBox'属性定义的viewbox
2. 返回viewbox.width / viewbox.height

Source

您的本征比是1/1 = 1

所以您要强迫height=width

---

解决方案

解决方案是根据父分区的比例为SVG设置width或margin。>

在您给出的示例中，您的比例为2：1，因此您的SVG应该具有width:50%或margin: 0 25%。

这意味着如果要设置其他比例，则必须进行相应的调整（请参见下面的代码中的纵向1-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的使用不是很熟练，并且此响应是研究和大量实验的结果！我很高兴收到对我的回复的任何调整和/或更正。

与容器的特定高度和宽度以及最大高度和最大宽度一起添加。大众和大众单位可用于使这种布局更加灵活。

  max-height: 100px;
  max-width: 200px;
  width: 100vw;
  height: 100vh;

这样可以将max-width: 100%; max-height: 100%;设置为svg，并且不会重叠。

这里是小提琴：

.container {
  display: grid;
  background-color: greenyellow;
  margin: 5px;
  min-height: 10px;
  min-width: 10px;
}

.portrait {
  max-height: 100px;
  max-width: 200px;
  width: 100vw;
  height: 100vh;
}

.landscape {
  max-height: 200px;
  max-width: 100px;
  width: 100vw;
  height: 100vh;
}

.aspect-ratio {
  grid-column: 1;
  grid-row: 1;
  background-color: deeppink;
  border-radius: 50%;
  align-self: center;
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
}
<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 2

与容器的特定高度和宽度以及最大高度和最大宽度一起添加。大众和大众单位可用于使这种布局更加灵活。