Bagaimanakah Saya Boleh Mengisi Div dengan Imej Sambil Mengekalkan Nisbah Aspeknya?

Mengisi Div dengan Imej Sambil Mengekalkan Perkadaran

Dalam pembangunan web, anda mungkin menghadapi keperluan untuk memaparkan imej dalam elemen div sambil memastikan nisbah bidang imej kekal utuh. Ini boleh menjadi masalah rumit, tetapi penyelesaiannya terletak pada menggabungkan CSS flexbox dan saiz imej yang teliti.

Pertimbangkan senario ini: anda mempunyai elemen div dengan saiz tetap dan imej di dalamnya. Anda mahu imej sentiasa memenuhi div, tidak kira sama ada orientasi landskap atau potret. Keperluan ini boleh dipenuhi walaupun imej terputus kerana div mempunyai limpahan: set tersembunyi.

Untuk mencapai kesan ini, ikut langkah berikut:

• Alih keluar lebar dan ketinggian atribut daripada teg imej untuk mengekalkan nisbah bidangnya.
• Tetapkan elemen div untuk menggunakan flexbox dengan paparan: lentur.
• Gunakan justify-content: tengah dan align-item: tengah pada div untuk memusatkan imej di dalamnya.
• Tambah limpahan: tersembunyi pada div untuk memangkas sebarang lebihan imej yang memanjang melebihi saiznya.
• Gayakan imej dalam div sebagai berikut:

.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

• Pengecutan fleksibel: 0 memastikan imej tidak mengecut jika div menjadi lebih kecil.
• Lebar min: 100% dan ketinggian min: 100% memastikan bahawa imej sentiasa sekurang-kurangnya sebesar div.

Menggunakan teknik ini, anda boleh mengisi div dengan imej sambil mengekalkan perkadarannya, tanpa mengira orientasinya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengisi Div dengan Imej Sambil Mengekalkan Nisbah Aspeknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!