<p>在我尝试创建一个包含 svg 图像的响应式网格区域时，我遇到了奇怪的行为，例如任意网格区域宽度，以及无法让图像增大或缩小到某个点而不停止。我得到的最接近的是：</p> <p> <pre class="brush:css;toolbar:false;">* { 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; }</pre> <pre class="brush:html;toolbar:false;">&lt;header&gt; &lt;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"&gt; &lt;div&gt; &lt;h1&gt;Heading&lt;/h1&gt; &lt;p&gt;Text Line 1&lt;/p&gt; &lt;p&gt;Text Line 2&lt;/p&gt; &lt;p&gt;Text Line 3&lt;/p&gt; &lt;/div&gt; &lt;nav&gt; &lt;a href="#"&gt;Menu Item 1&lt;/a&gt; &lt;a href="#"&gt;Menu Item 2&lt;/a&gt; &lt;a href="#"&gt;Menu Item 3&lt;/a&gt; &lt;a href="#"&gt;Menu Item 4&lt;/a&gt; &lt;a href="#"&gt;Menu Item 5&lt;/a&gt; &lt;a href="#"&gt;Menu Item 6&lt;/a&gt; &lt;/nav&gt; &lt;/header&gt;</pre> </p> <p>我尝试过高度、最小高度、最大高度，甚至在宽度内使用夹子，但收效甚微。也许我只是缺乏理解，就像一些现有的回复所暗示的那样，但不知道如何解决。</p>

* {
  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>

* {
  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>