無法使用 svg 影像建立響應式網格區域

Question

當我嘗試建立一個包含svg圖像的響應式網格區域時，我遇到了奇怪的行為，例如任意網格區域寬度，以及無法讓圖像增大或縮小到某個點而不停止。我得到的最接近的是：*{box-sizing:border-box;}body{margin:0;}header{display:grid;grid-template-columns:auto1fr;background-color:green;padding:1r

P粉294954447 · Answer

影像列的寬度不是任意的。

網格容器首先佈置結構。。然後正在佈置物品。

這表示當影像處於其自然寬度 (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;
}


  
    
  
  
    Heading
    Text Line 1
    Text Line 2
    Text Line 3
  
  
    Menu Item 1
    Menu Item 2
    Menu Item 3
    Menu Item 4
    Menu Item 5
    Menu Item 6

當你嘗試 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;
}


  
    
  
  
    Heading
    Text Line 1
    Text Line 2
    Text Line 3
  
  
    Menu Item 1
    Menu Item 2
    Menu Item 3
    Menu Item 4
    Menu Item 5
    Menu Item 6

旁注

一般來說，在使用 CSS Grid 和 Flexbox 時，將圖像作為容器的子項並不是一個好主意。

換句話說，通常最好避免將影像用作網格或彈性項目。

不同瀏覽器之間有太多錯誤和渲染差異。

在許多情況下，只需將圖像放入 div 中（使 div 成為網格項目）即可解決問題。

避免將影像作為網格或彈性項目：

無法使用 svg 影像建立響應式網格區域

全部回覆(1)我來回復