Bagaimana Saya Boleh Mengekalkan Nisbah Aspek Imej Menggunakan Flexbox?

Menguatkuasakan Nisbah Aspek Imej dengan Flexbox: Mengekalkan Perkadaran

Dalam susun atur flexbox, imej sering berubah saiz untuk memenuhi lebar bekasnya. Walaupun tingkah laku ini diingini dalam banyak kes, ia mungkin tidak sesuai apabila anda ingin mengekalkan nisbah aspek asal imej.

Pertimbangkan HTML dan CSS berikut:

<div class="slider">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
</div>

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

Kod ini mencipta peluncur dengan tiga imej yang meregang atau mengecut untuk mengisi bekas secara mendatar.

Penyelesaian 1: Menggunakan object-fit

Salah satu cara untuk mengekalkan nisbah bidang imej adalah dengan menggunakan sifat CSS object-fit. Dengan menetapkan object-fit: contain, anda mengarahkan penyemak imbas untuk mengubah saiz imej sambil mengekalkan perkadarannya.

.slider img {
    object-fit: contain;
}

Penyelesaian ini mudah dan berfungsi dengan baik dalam kebanyakan kes.

Penyelesaian 2: Peraturan Khusus Flex

Pendekatan lain ialah menggunakan peraturan khusus fleksibel. Dengan menetapkan align-self: center dan flex: 0 0 auto, anda memaksa imej untuk memusatkan diri secara menegak dan mengubah saiz secara berkadar dalam bekasnya.

.slider img {
    align-self: center;
    flex: 0 0 auto;
}

Kaedah ini memberi anda lebih kawalan ke atas kedudukan imej dan lebih sesuai untuk keperluan susun atur khusus.

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