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; } 
Tajuk
Barisan Teks 1
Barisan Teks 2
Barisan Teks 3
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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Lebar lajur imej tidak sewenang-wenangnya.
Bekas grid meletakkan struktur terlebih dahulu..Kemudiansedang 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; }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; }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中（使divke dalam item grid) akan berjaya.Elakkan imej sebagai grid atau item fleksibel: