Impossible de créer une zone de grille réactive à l'aide de l'image SVG

Question

Lorsque j'essaie de créer une zone de grille réactive contenant une image svg, je rencontre un comportement étrange, tel que des largeurs de zone de grille arbitraires et une incapacité à faire agrandir ou réduire l'image jusqu'à un certain point sans s'arrêter. Le plus proche que j'ai obtenu était :

* {
    dimensionnement de la boîte : bordure-boîte ;
}
corps {
    marge : 0 ;
}

entête {
    affichage : grille ;
    grille-modèle-colonnes : auto 1fr ;
    couleur de fond : vert ;
    rembourrage : 1rem ;
}

img {
    largeur : 100 % ;
    largeur maximale : 25vw ;
    largeur min : 12 rem ;
    couleur de fond : rose ;
}

div{
    couleur de fond : rouge ;
    alignement du texte : centre ;
}

navigation {
    couleur de fond : jaune ;
    colonne de grille : travée 2 ;
}</pré>
<pre class="brush:html;toolbar:false;"><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>Titre</h1>
    <p>Ligne de texte 1</p>
    <p>Ligne de texte 2</p>
    <p>Ligne de texte 3</p>
  </div>
  <nav>
    <a href="#">Élément de menu 1</a>
    <a href="#">Élément de menu 2</a>
    <a href="#">Élément de menu 3</a>
    <a href="#">Élément de menu 4</a>
    <a href="#">Élément de menu 5</a>
    <a href="#">Élément de menu 6</a>
  </nav>
</en-tête>

J'ai essayé la hauteur, la hauteur minimale, la hauteur maximale et même l'utilisation de clips dans la largeur, sans grand succès. Peut-être que je manque simplement de compréhension, comme le suggèrent certaines réponses existantes, mais je ne sais pas comment y remédier.

Answer 1

La largeur des colonnes d'images n'est pas arbitraire.

Le conteneur en grille présente d'abord la structure. . Ensuite, organise les articles.

Cela signifie que lorsque l'image atteint sa largeur naturelle (100 %), la première colonne sera redimensionnée.

Le navigateur ne revient pas en arrière et ne redimensionne pas la colonne lorsque les éléments sont rendus avec 宽度：50%.

La taille des colonnes n'est donc pas arbitraire ; c'est la largeur naturelle de l'image.

(Il s'agit sans doute d'un bug ou d'une limitation CSS.)

Veuillez noter que ce problème n'existe pas lorsque l'image est en pleine largeur :

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

Il reviendra lorsque vous essaierez 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>

---

Note latérale

En général, lorsque vous utilisez CSS Grid et Flexbox, ce n'est pas une bonne idée de créer des images en tant qu'enfants de conteneurs.

En d'autres termes, il est généralement préférable d'éviter d'utiliser des images comme grilles ou éléments flexibles.

Il y a trop de bugs et de différences de rendu entre les différents navigateurs.

Dans de nombreux cas, il suffit de placer l'image div 中（使 div dans un élément de la grille) fera l'affaire.

Évitez les images sous forme de grille ou d'éléments flexibles :

• Comment obtenir une image qui correspond à la taille des cellules de la grille ?
• Les cellules contenant des images dans la grille CSS prennent trop de place
• Redimensionner les images dans Flexbox
• Les images dans les colonnes Flexbox ne s'affichent pas correctement dans Chrome
• L'image dans le conteneur Flex n'est pas centrée après avoir défini la largeur et la hauteur