无法使用 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%) 时，第一列的大小将会调整。

当项目以宽度：50% 呈现时，浏览器不会返回并重新调整列的大小。

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

（这可以说是一个错误或 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 时，将图像作为容器的子项并不是一个好主意。

换句话说，通常最好避免将图像用作网格或弹性项目。

不同浏览器之间存在太多错误和渲染差异。

在许多情况下，只需将图像放入 div 中（使 div 成为网格项）即可解决问题。

避免将图像作为网格或弹性项目：

• 如何获取适合网格单元格大小的图像？
• CSS 网格中包含图像的单元格占用太多空间
• 缩放 Flexbox 中的图像
• Flexbox 列中的图像在 Chrome 中无法正确呈现
• 定义宽度和高度后，Flex 容器中的图像未居中