Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Imej dalam CSS Flexbox Semasa Membenarkan Ketinggian Fleksibel?

Memelihara Nisbah Aspek Imej dengan Ketinggian Fleksibel

Dalam model kotak fleksibel CSS, imej sering meregang atau mengecut untuk memenuhi lebar bekasnya . Mengekalkan nisbah bidang semasa melaraskan ketinggian boleh menjadi satu cabaran. Untuk menangani isu ini, mari kita terokai penyelesaian yang berkesan.

Satu penyelesaian ialah menggunakan padanan objek pada elemen imej:

object-fit: contain;

Harta ini mengarahkan penyemak imbas untuk mengandungi imej dalam ruang yang ditetapkan sambil mengekalkan perkadarannya. Anda boleh melihat contoh langsung di http://jsfiddle.net/ykw3sfjd/.

Sebagai alternatif, sifat flex khusus boleh digunakan:

align-self: center;
flex: 0 0 auto;

align-self memastikan imej menegak berpusat dalam elemen induk, manakala flex: 0 0 auto mengawal tingkah laku pertumbuhan imej. Ia menghalang imej daripada regangan untuk memenuhi ketinggian yang tersedia, membolehkan ia mengekalkan nisbah bidangnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengekalkan Nisbah Aspek Imej dalam CSS Flexbox Semasa Membenarkan Ketinggian Fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!