无法用svg图像创建响应性网格区域

Question

在我尝试使用svg图像创建响应网格区域时，我遇到了奇怪的行为，例如任意网格区域宽度，以及无法让图像增长或缩小到某一点而不是停止。我得到的最接近的结果如下:

* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: grid;
grid-template-columns: auto 1fr;
background-color: green;
padding: 1rem;
}
img {
width: 100%;
max-width: 25vw;
min-width: 12rem;
background-color: pink;
}
div {
background-color: red;
text-align: center;
}
nav {
background-color: yellow;
grid-column: span 2;
}

<header>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 413.28'%3E%3Crect class='655de5e2-44d3-4b5a-ae63-e6e7ec799246' x='18' y='18.12' width='288' height='324' fill='blue'/%3E%3C/svg%3E">
<div>
<h1>Heading</h1>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
</div>
<nav>
<a href="#">Menu Item 1</a>
<a href="#">Menu Item 2</a>
<a href="#">Menu Item 3</a>
<a href="#">Menu Item 4</a>
<a href="#">Menu Item 5</a>
<a href="#">Menu Item 6</a>
</nav>
</header>

我试过高度，最小高度，最大高度，甚至使用宽度内的钳，几乎没有成功。也许我只是像一些现有的回应所暗示的那样缺乏理解，但不知道如何解决。

Answer 1

图片列的宽度不是任意的。

网格容器首先布局结构。这是然后布置项目。

这意味着当图像处于自然宽度(100%)时，第一列的大小。

当项目在width: 50%上呈现时，浏览器不会返回并重新调整列的大小。

所以列的大小不是任意的;这是图像的自然宽度。

(这可能是一个bug或CSS限制)

请注意，当图像处于全宽时，此问题不存在:

* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: grid;
grid-template-columns: auto 1fr;
background-color: green;
padding: 1rem;
}
img {
width: 100%;
background-color: pink;
}
div {
background-color: red;
}
nav {
background-color: yellow;
grid-column: span 2;
}

<header>
<div style="background-color: blue">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 413.28'%3E%3Crect class='655de5e2-44d3-4b5a-ae63-e6e7ec799246' x='18' y='18.12' width='288' height='324' fill='blue'/%3E%3C/svg%3E">
</div>
<div>
<h1>Heading</h1>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
</div>
<nav>
<a href="#">Menu Item 1</a>
<a href="#">Menu Item 2</a>
<a href="#">Menu Item 3</a>
<a href="#">Menu Item 4</a>
<a href="#">Menu Item 5</a>
<a href="#">Menu Item 6</a>
</nav>
</header>

当你尝试width: 150%时，它会返回:

* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
display: grid;
grid-template-columns: auto 1fr;
background-color: green;
padding: 1rem;
}
img {
width: 150%;
background-color: pink;
}
div {
background-color: red;
}
nav {
background-color: yellow;
grid-column: span 2;
}

<header>
<div style="background-color: blue">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 324 413.28'%3E%3Crect class='655de5e2-44d3-4b5a-ae63-e6e7ec799246' x='18' y='18.12' width='288' height='324' fill='blue'/%3E%3C/svg%3E">
</div>
<div>
<h1>Heading</h1>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
</div>
<nav>
<a href="#">Menu Item 1</a>
<a href="#">Menu Item 2</a>
<a href="#">Menu Item 3</a>
<a href="#">Menu Item 4</a>
<a href="#">Menu Item 5</a>
<a href="#">Menu Item 6</a>
</nav>
</header>

---

边注

一般来说，当使用CSS Grid和Flexbox时，将图像作为容器的子元素并不是一个好主意。

换句话说，通常最好避免将图像作为网格或伸缩项。

在不同的浏览器之间有太多的bug和呈现差异。

在许多情况下，简单地将图像放在div中(使div成为网格项)就解决了问题。

避免图像作为网格或伸缩项:

• 我怎么能得到一个图像适合网格单元格的大小?
• CSS网格中含有图像的单元格占用太多空间
• 缩放flexx中的图像
• flexbox列中的图像在Chrome中无法正确渲染
• 在定义宽度和高度后，伸缩容器中的图像未居中

Answer 2

如果你在<div>中包裹图像，并从<svg>和<img>中删除宽度和高度属性，你可以让它到网格来控制大小。

现在，你可以设置任何适合你的网格模板，像grid-template-columns: 20% auto;。

body {
margin: 0;
}
header {
display: grid;
grid-template-columns: 20% auto;
background-color: green;
padding: 1rem;
}
header > div {
background-color: pink;
grid-column: 1;
grid-row: 1;
}
header > section {
background-color: red;
grid-column: 2;
grid-row: 1;
}
header > nav {
background-color: yellow;
grid-column: span 2;
grid-row: 2;
}

<header>
<div>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjQgNDEzLjI4Ij48cmVjdCB4PSIxOCIgeT0iMTguMTIiIHdpZHRoPSIyODgiIGhlaWdodD0iMzI0IiBmaWxsPSJibHVlIi8+PC9zdmc+">
</div>
<section>
<h1>Heading</h1>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3</p>
</section>
<nav>
<a href="#">Menu Item 1</a>
<a href="#">Menu Item 2</a>
<a href="#">Menu Item 3</a>
<a href="#">Menu Item 4</a>
<a href="#">Menu Item 5</a>
<a href="#">Menu Item 6</a>
</nav>
</header>