<div> <img src="Perkenalkan alamat gambar" alt="" class="Img"> </div>
Metode 1: Tambahkan object-fit:cover ke elemen img
div{ lebar: 500 piksel; tinggi: 500 piksel; } .Img{ lebar: 100%; tinggi: 100%; kesesuaian objek: penutup; }
Metode 2: Pusatkan elemen img secara vertikal, dan atur lebar dan tinggi minimum ke layar penuh
div{ lebar: 500 piksel; tinggi: 500 piksel; posisi:relatif; meluap:tersembunyi; } .Img{ posisi: mutlak; atas: 50%; kiri: 50%; tampilan: blok; lebar minimum: 100%; tinggi minimum: 100%; transformasi:terjemahkan(-50%,-50%); }
<div kelas="wadah"></div>
Metode: Tambahkan background-size: cover ke elemen div; atur gambar menjadi non-repeat no-repeat
.wadah{ tinggi: 500 piksel; lebar: 500 piksel; margin: 0px otomatis; latar belakang: url('../Status/img/health.png') tidak berulang; ukuran latar belakang: sampul; }
Demikianlah artikel tentang cara mengisi div dengan gambar CSS. Untuk konten lebih lanjut tentang cara mengisi div dengan gambar CSS, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah downcode di masa depan.