Susun atur foto penyesuaian dengan Flexbox

Gunakan Flexbox untuk mencapai susun atur foto penyesuaian, ringan dan cekap! Artikel ini memperkenalkan pendekatan ringan untuk mencipta susun atur foto streaming air terjun yang mendatar menggunakan Flexbox, membolehkan susunan gambar yang lancar dari saiz mana -mana tanpa JavaScript.

Penyelesaian ini bukan sahaja ringan, tetapi juga sangat mudah. Kami hanya memerlukan senarai imej yang tidak teratur dan 17 baris kod CSS, dan terasnya terletak pada kotak Flexbox dan object-fit .

Mengapa memilih kaedah ini?

Saya mempunyai dua hobi: merakam kehidupan dengan foto, dan meneroka cara yang menarik untuk menggabungkan atribut CSS (baik baru dan lama).

Beberapa minggu yang lalu, saya menghadiri acara XOXO, mengambil banyak gambar, dan akhirnya ditapis 39 gambar yang indah. Untuk menguruskan kandungan saya dengan lebih baik, saya telah berusaha untuk membuat blog foto mudah sejak beberapa tahun yang lalu, tetapi saya tidak pernah dapat mencapai susun atur ideal saya: susun atur air terjun yang mudah di mana gambar mengisi garis sambil mengekalkan nisbah aspek mereka (fikirkan aplikasi foto pada iOS, foto Google, Flickr ...).

Saya melakukan penyelidikan untuk melihat sama ada terdapat pilihan ringan, bukan JavaScript, tetapi tidak dapat mencari penyelesaian yang sesuai dengan keperluan saya. Semasa menunggu kelewatan penerbangan, saya mula mencuba beberapa kod dan menyekat diri saya daripada mengekalkan kod itu sebagai ringkas (kerana itulah yang saya fikir adalah keseronokan).

Struktur HTML Asas

Oleh kerana pada dasarnya saya membuat senarai imej, saya memilih senarai yang tidak teratur:

<li> <li>

Kegunaan flexbox yang indah

Kemudian ada beberapa momen inspirasi:

<li> Flexbox sangat sesuai untuk mengisi baris dengan menentukan lebar sel berdasarkan kandungan sel. <li> Ini bermakna semua imej (tanah atau potret) perlu mempunyai ketinggian yang sama. <li> Saya boleh menggunakan object-fit: cover; Untuk memastikan imej mengisi sel -sel.

Secara teorinya, ini kelihatan seperti penyelesaian yang boleh dipercayai, dan ia memberi saya hasil yang saya puas 90%.

 ul {
  Paparan: Flex;
  Flex-Wrap: Bungkus;
}

li {
  Ketinggian: 40VH;
  Flex-Grow: 1;
}

img {
  Max-Height: 100%;
  Min-lebar: 100%;
  Objek-Fit: Cover;
  Vertical-Align: Bawah;
}

Nota: 40vh nampaknya merupakan pendekatan awal yang terbaik untuk pelayar desktop, menunjukkan dua baris foto penuh pada saiz yang munasabah dan menunjukkan bahawa terdapat lebih banyak foto di bawah. Ini juga membolehkan lebih banyak foto dipaparkan setiap baris, yang meningkatkan nisbah aspek dengan ketara.

Mengendalikan garis terakhir masalah peregangan

Satu -satunya masalah yang saya ada ialah Flexbox benar -benar mahu mengisi semua baris, dan ia melakukan sesuatu yang pelik mengenai nisbah aspek baris terakhir foto. Ini mungkin paling saya suka dengan susun atur ini, tetapi saya terpaksa menambah yang kosong pada akhir senarai<li> elemen.

<li>

Digabungkan dengan kod CSS berikut:

 li: anak terakhir {
  Flex-Grow: 10;
}

Nota: Tidak ada asas saintifik untuk menggunakan "10" di sini. Ini memberikan hasil terbaik dalam semua ujian saya.

Demo (pautan demo atau coretan kod harus dimasukkan di sini)

Pengoptimuman Viewport

Sesetengah faktor perlu dipertimbangkan semasa bekerja di arah viewport yang berbeza.

Skrin menegak

Jika ketinggian viewport anda lebih besar daripada lebar, kaedah ini mengehadkan bilangan foto setiap baris, yang mempengaruhi nisbah aspeknya. Untuk menyelesaikan masalah ini, anda boleh menggunakan pertanyaan media mudah untuk menjadikan garis foto lebih pendek:

 @media (max-aspect-ratio: 1/1) {
  li {
    Ketinggian: 30VH;
  }
}

Skrin yang lebih pendek

Untuk menyesuaikan diri dengan peranti mendatar kecil, meningkatkan ketinggian foto dapat membantu memaparkan foto sebanyak mungkin:

 @media (max-height: 480px) {
  li {
    Ketinggian: 80VH;
  }
}

Skrin menegak yang lebih kecil

Kebanyakan telefon tidak cukup luas untuk mendapatkan Flexbox untuk berfungsi dengan betul tanpa mengecilkan foto, jadi saya memilih untuk tidak cuba memegang beberapa gambar setiap baris. Namun, menetapkan ketinggian maksimum di sini adalah bernilai supaya anda sekurang -kurangnya dapat melihat gambar seterusnya dalam senarai.

 @media (max-aspect-ratio: 1/1) dan (max-width: 480px) {
  ul {
    flex-arah: lajur; /* Tukar ke arah lajur*/
  }

  li {
    ketinggian: auto;
    Lebar: 100%;
  }

  img {
    Lebar: 100%;
    Max-Height: 75VH;
    Min-lebar: 0;
  }
}

Meringkaskan

Pendekatan ini tidak sepenuhnya menghormati nisbah aspek foto (tetapi sudah dekat) dan kadang -kadang membawa kepada beberapa hasil yang pelik, tetapi saya benar -benar suka kesederhanaan dan fleksibiliti. Ingin mendapatkan galeri anda untuk menatal secara mendatar dan bukannya secara menegak? Hanya buat beberapa pelarasan. Adakah terdapat 1,000 gambar di galeri atau hanya satu? Semua kelihatan baik. Tidak pasti mengenai nisbah aspek? Flexbox adalah pilihan terbaik anda. Sekiranya anda belum melihat demo, sila baca lagi dan beritahu saya apa yang anda fikirkan!

Petua tambahan

Bergantung pada saiz foto -foto ini, halaman sedemikian boleh berkembang menjadi beberapa megabait dengan cepat. Di blog saya, saya menambah loading="lazy" untuk menyelesaikan masalah ini. Dengan harta ini, imej hanya akan dimuatkan apabila anda dekat dengan mereka semasa anda menatal. Pada masa ini ia hanya disokong dalam Chrome, tetapi anda boleh menulis teknologi yang lebih banyak disokong.

Atas ialah kandungan terperinci Susun atur foto penyesuaian dengan Flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!