Tidak dapat mencipta kawasan grid responsif menggunakan imej svg

Question

Apabila saya cuba mencipta kawasan grid responsif yang mengandungi imej svg, saya menghadapi gelagat pelik, seperti lebar kawasan grid sewenang-wenangnya dan ketidakupayaan untuk menjadikan imej berkembang atau mengecut ke titik tertentu tanpa berhenti. Yang paling dekat yang saya dapat ialah:

* {
    saiz kotak: kotak sempadan;
}
badan {
    margin: 0;
}

kepala {
    paparan: grid;
    grid-template-lajur: auto 1fr;
    warna latar belakang: hijau;
    padding: 1rem;
}

img {
    lebar: 100%;
    lebar maksimum: 25vw;
    lebar min: 12rem;
    warna latar belakang: merah jambu;
}

div {
    warna latar belakang: merah;
    text-align: tengah;
}

nav {
    warna latar belakang: kuning;
    lajur grid: rentang 2;
}

<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>Tajuk</h1>
    <p>Barisan Teks 1</p>
    <p>Barisan Teks 2</p>
    <p>Barisan Teks 3</p>
  </div>
  <nav>
    <a href="#">Item Menu 1</a>
    <a href="#">Item Menu 2</a>
    <a href="#">Item Menu 3</a>
    <a href="#">Menu Item 4</a>
    <a href="#">Menu Item 5</a>
    <a href="#">Menu Item 6</a>
  </nav>
</header>

Saya telah mencuba ketinggian, ketinggian min, ketinggian maksimum dan juga menggunakan klip dalam lebar dengan sedikit kejayaan. Mungkin saya kurang memahami, seperti yang dicadangkan oleh beberapa balasan sedia ada, tetapi tidak tahu cara untuk membetulkannya.

Answer 1

Lebar lajur imej tidak sewenang-wenangnya.

Bekas grid meletakkan struktur terlebih dahulu. . Kemudian sedang menyusun barang.

Ini bermakna apabila imej berada pada lebar semula jadi (100%), lajur pertama akan diubah saiznya.

Pelayar tidak kembali dan mengubah saiz lajur apabila item dipaparkan dengan 宽度：50%.

Jadi saiz lajur tidak sewenang-wenangnya; ia adalah lebar semula jadi imej.

(Ini boleh dikatakan pepijat atau had CSS.)

Sila ambil perhatian bahawa masalah ini tidak wujud apabila imej lebar penuh:

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

Ia akan kembali apabila anda mencuba 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>

---

Nota sampingan

Secara umumnya, apabila menggunakan CSS Grid dan Flexbox, bukanlah idea yang baik untuk menjadikan imej sebagai anak bekas.

Dalam erti kata lain, sebaiknya elakkan menggunakan imej sebagai grid atau item fleksibel.

Terdapat terlalu banyak pepijat dan memaparkan perbezaan antara penyemak imbas yang berbeza.

Dalam banyak kes, hanya meletakkan imej div 中（使 div ke dalam item grid) akan berjaya.

Elakkan imej sebagai grid atau item fleksibel:

• Bagaimana untuk mendapatkan imej yang sesuai dengan saiz sel grid?
• Sel yang mengandungi imej dalam grid CSS mengambil terlalu banyak ruang
• Skalakan imej dalam Flexbox
• Imej dalam lajur Flexbox tidak dipaparkan dengan betul dalam Chrome
• Imej dalam bekas Flex tidak dipusatkan selepas menentukan lebar dan tinggi