Bagaimana untuk Mengekalkan Nisbah Aspek Imej dalam CSS Flexbox?

Mengekalkan Nisbah Aspek Imej dalam Flexbox

Mengekalkan perkadaran imej apabila mengubah saiz ketinggiannya boleh menjadi satu cabaran dalam model flexbox CSS. Walau bagaimanapun, terdapat beberapa kaedah yang tersedia untuk mencapai ini.

Harta Sesuai Objek

Satu pendekatan ialah menggunakan sifat muat objek pada imej. Dengan menetapkan muat objek: mengandungi, imej akan diskalakan agar muat dalam bekas sasarannya sambil mengekalkan nisbah bidangnya.

Peraturan Khusus Fleksibel

Pilihan lain ialah untuk menggunakan peraturan khusus fleksibel:

• Tetapkan align-self: tengah untuk memusatkan imej secara menegak dalam bekas induk.
• Tetapkan fleksibel: 0 0 auto untuk menjadikan lebar dan ketinggian imej fleksibel, membolehkan ia mengecut atau mengembang mengikut keperluan.

Contoh

Berikut ialah contoh yang menunjukkan kedua-duanya kaedah:

<div class="slider">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
</div>

.slider {
    display: flex;
    height: 200px;
}

.slider img {
    margin: 0 5px;
    object-fit: contain;
}

/* Alternative Flex-Specific Rules */
.slider img {
    align-self: center;
    flex: 0 0 auto;
}

Kaedah ini harus mengekalkan nisbah bidang imej dengan berkesan, walaupun semasa melaraskan ketinggiannya.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Nisbah Aspek Imej dalam CSS Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!