Bagaimanakah Saya Boleh Mengisi Div Secara Berkadar dengan Imej Sambil Mengekalkan Nisbah Aspek?

Mengisi Div dengan Imej Secara Berkadar

Dalam urutan ini, pengguna berusaha untuk mengisi div dengan imej sambil mengekalkan nisbah bidang , tanpa mengira orientasi imej. Div telah disembunyikan limpahan, membolehkan pemangkasan imej berpotensi.

Untuk menangani isu ini, disyorkan untuk mengalih keluar atribut lebar dan ketinggian daripada imej untuk mengekalkan nisbah aspek semula jadinya. Flexbox kemudiannya boleh digunakan untuk memusatkan imej dalam div.

Berikut ialah coretan CSS untuk mencapai ini:

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

Dan contoh HTML yang sepadan:

<div class="fill">
    <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/237/320/240" class="lazy" alt="">
</div>

Penyelesaian ini menggunakan flexbox untuk memusatkan imej dan memastikan ia memenuhi div, mengekalkan perkadarannya.

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