Imej cecair dalam susun atur perkadaran berubah -ubah

Ia agak mudah untuk memproses imej cecair dalam susun atur bebas hari ini. Walau bagaimanapun, untuk antara muka yang lebih kompleks, kita sering perlu meletakkan imej di dalam elemen responsif, seperti kad ini:

Anggapkan imej ini adalah kandungan bukan semantik dan hanya digunakan untuk hiasan. Ini bagus untuk menggunakan background-image . Dan, kerana imej ini mengandungi objek, kita tidak dapat memangkas mana-mana bahagian apabila susun atur responsif, jadi kami memilih background-size: contain .

Masalahnya ialah: pada peranti mudah alih, orientasi kad ini berubah dan menjadi menegak, dengan imej di bahagian atas. Kita boleh melakukan ini menggunakan sebarang jenis teknologi susun atur CSS, dan mungkin lebih baik menggunakan grid CSS atau kotak elastik.

Walau bagaimanapun, apabila kami menguji skrin yang lebih kecil, kami mendapat hasil berikut kerana atribut contain :

Ini tidak sesuai. Imej itu diubah saiz untuk mengekalkan nisbah aspeknya, dan tidak menanam sebarang butiran, dan kita tidak boleh mengubah background-size untuk cover jika imej itu penting dan tidak boleh dipotong.

Pada ketika ini, percubaan seterusnya kami mungkin biasa: letakkan imej dalam talian, bukan latar belakang.

Pada peranti desktop, ini berfungsi dengan baik:

Ia juga baik pada peranti mudah alih:

Tetapi pada skrin yang lebih kecil, perkadaran imej akan diputarbelitkan kerana semua saiz tetap.

Kita boleh menghabiskan berjam -jam menyesuaikan imej, kad, dan sifat elastik, menyesuaikan bolak -balik. Atau, kita boleh ...

Kandungan utama berasingan dari latar belakang

Ini adalah asas untuk mendapatkan fleksibiliti dan fleksibiliti yang lebih besar dalam imej responsif. Walaupun tidak mungkin dalam semua kes, dalam banyak kes ia dapat dicapai dengan sedikit usaha dalam reka bentuk, terutama jika pendekatan sedemikian dirancang terlebih dahulu.

Dalam lelaran seterusnya kami, kami meletakkan imej strawberi pada latar belakang telus dan menggunakan CSS untuk menetapkan warna biru dalam imej raster. Teruskan menggunakan saiz paparan dalam demo dengan mengubah saiz ruang sampel!

Melihat gaya dengan teliti, perhatikan bahawa kami juga menambah padding ke Div yang mengandungi imej, jadi strawberi tidak terlalu dekat dengan tepi. Kita boleh mengawal sepenuhnya seberapa dekat atau jauh kita mahu mereka bersama padding ini.

Perhatikan bahawa kami juga menggunakan margin negatif untuk mengimbangi padding pada pembalut kad luaran, jika tidak, terdapat kekosongan di sekitar imej.

Gunakan atribut Objek-Fit untuk imej sebaris

Walaupun demonstrasi sebelumnya berfungsi, kita masih dapat memperbaiki pendekatan ini. Setakat ini, kami mengandaikan bahawa imej itu adalah kandungan bebas semantik-tetapi dalam susun atur ini, ilustrasi imej juga mungkin lebih daripada sekadar hiasan.

Sekiranya ini berlaku, kami benar -benar tidak mahu imej itu dipotong, kerana ini sebenarnya bersamaan dengan kehilangan data. Untuk mengelakkan ini, sebaiknya letakkan imej sebaris dan bukannya latar belakang, yang boleh kita lakukan dengan harta object-fit .

Kami telah mengekstrak strawberi dari latar belakang, yang kini menjadi elemen inline, tetapi kami mengekalkan warna latar dalam div imej yang sama.

Akhirnya, menggabungkan object-fit: contain dengan lebar 100% membolehkan anda mengubah saiz tetingkap dan mengekalkan nisbah aspek strawberi. Walau bagaimanapun, kelemahan pendekatan ini ialah kita perlu menetapkan ketinggian tetap untuk versi desktop imej -atau yang lain akan mengikuti perkadaran lebar yang ditetapkan (mengurangkan ia akan mengubah susun atur). Sekiranya kita perlu menjana kad ini dengan jumlah teks yang berubah -ubah, teks akan membungkus, yang boleh membuat perkara terlalu ketat.

Akan datang: aspek nisbah

Penyelesaian kepada masalah di atas mungkin dilaksanakan dengan segera melalui harta aspect-ratio yang akan datang. Ini akan membolehkan menetapkan skala tetap elemen, sebagai contoh:

 .el {
  aspek nisbah: 16/9;
}

Ini bermakna kita akan dapat menghapuskan ketinggian tetap dan menggantikannya dengan nisbah aspek yang kita kirakan. Sebagai contoh, dimensi dalam titik putus desktop contoh terakhir kami kelihatan seperti ini:

 .Image {
  / * ... */
  Ketinggian: 184px;
  lebar: 318px;
}

Menggunakan aspect-ratio kita boleh memadam pengisytiharan ketinggian dan mengira untuk mendapatkan skala 184 yang terdekat:

 .Image {
  / * ... */
  lebar: 318px; /* lebar rujukan*/
  Ketinggian: Unset; /* Tetapkan semula ketinggian yang ditetapkan di luar pertanyaan media*/
  aspek nisbah: 159/92; /* Dekat dengan ketinggian 184px*/
}

Jika anda ingin mengetahui lebih lanjut, anda boleh meneroka atribut yang akan datang dalam artikel ini.

Akhirnya, terdapat pelbagai cara untuk mencapai imej responsif yang boleh dipercayai dalam susun atur skala berubah -ubah. Tetapi silap mata untuk menjadikan kerja ini lebih mudah - dan lebih baik - tidak semestinya terletak di CSS; Ia boleh menjadi mudah, hanya menyesuaikan imej anda, sama ada untuk memisahkan latar depan dari latar belakang (seperti yang kita lakukan), atau memilih imej tertentu yang masih berfungsi walaupun sebahagian besar pinggir dipotong.

Atas ialah kandungan terperinci Imej cecair dalam susun atur perkadaran berubah -ubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!