<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;"><header> <img src="data:image/svg xml,"> <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></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;
}

  

    
  
  

    
Heading
    
Text Line 1
    
Text Line 2
    
Text Line 3
  
  

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

  

    
  
  

    
Heading
    
Text Line 1
    
Text Line 2
    
Text Line 3