Mit dem SVG-Bild kann kein reaktionsfähiger Rasterbereich erstellt werden

Question

Wenn ich versuche, einen responsiven Rasterbereich zu erstellen, der ein SVG-Bild enthält, stoße ich auf seltsames Verhalten, z. B. willkürliche Breiten des Rasterbereichs und es gelingt mir nicht, das Bild ohne Unterbrechung bis zu einem bestimmten Punkt zu vergrößern oder zu verkleinern. Das nächste, was ich bekam, war: *{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 成为网格项）即可解决问题。

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