Menampilkan galeri gambar dengan ukuran dan rasio gambar berbeda dengan spesifikasi berikut:
- Tidak ada kekosongan (margin) di antara gambar.
- Menghormati rasio asli sebanyak mungkin.
- Gambar dikelilingi oleh tautan.
- Solusi Non-JS.
- Gambar bisa dipangkas sedikit.
- Solusi portabel.
- Set gambar yang ditampilkan adalah acak.
- Gambar harus ditampilkan dari kiri ke kanan (mencegah penggunaan kolom).
Saya mencapainya dengan solusi flexbox berikut:
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
section a {
flex: auto;
}
section img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Controlling flex growability</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<section>
<a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
</body>
</html>
Solusinya bekerja, tetapi tergantung pada ukuran jendela, beberapa gambar terlalu banyak diperbesar, saya lebih suka lebih banyak elemen per baris, bahkan jika barang perlu menyusut lebih banyak.
Ini berarti bahwa alih-alih:
Saya lebih suka item dengan kepadatan lebih tinggi sehingga gambar tidak pernah diperbesar:
Saya mencari solusi untuk meningkatkan secara global jumlah elemen per baris sehingga gambar tidak diperbesar (atau setidaknya tidak terlalu banyak: misalnya: maks 10%).
Dua solusi peretas yang saya temukan sejauh ini adalah:
Solusi 1
Menggunakan properti zoom :
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
zoom: 50%;
}
section a {
flex: auto;
}
section img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Controlling flex growability</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<section>
<a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
</body>
</html>
Tetapi properti itu bekerja sangat baik di Chrome, bukan di Firefox.
Solusi 2
Meniru properti zoom dengan lebar / tinggi dan ubah: skala :
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 200% !important;
height: 200% !important;
transform-origin: 0 0;
transform: scale(0.5);
float: left;
margin-right: -100000px;
margin-bottom: -100000px;
}
section a {
flex: auto;
}
section img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Controlling flex growability</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<section>
<a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
</body>
</html>
Solusi itu berhasil sejauh ini, tetapi membutuhkan beberapa peretasan, dan masih jauh dari anggun dan sekarang akan memiliki dampak dengan elemen halaman lainnya.
Apakah ada solusi lain, lebih berorientasi fleksibel yang memungkinkan kontrol semacam itu? Saya telah mencoba menggunakan flex-grow: 0 : it, memang, menonaktifkan item yang tumbuh, tetapi kemudian ada gambar-gambar kosong di mana-mana.
zoom
karena itu memperbaiki semua baris untuk memiliki ketinggian yang sama persis, dengan melakukan itu: ia mencegah algoritma flex alami untuk "beradaptasi" dengan sesuatu "seoptimal mungkin". Sejauh yang saya mengerti, itu belum mungkin untuk mencapai apa yang saya inginkan dengan cara yang kompatibel dan non-hacky.Berikut ini adalah ide di mana Anda dapat mempertimbangkan ketinggian untuk mengontrol ukuran baris dan trik utamanya adalah mengandalkan
min-width:100%
gambar Anda untuk mengisi ruang.Pada dasarnya,
a
akan menentukan ketinggian, gambar akan mengikuti ketinggian itu dan akan menghitungauto
lebar untuk menjaga rasio. Lebar gambar akan menentukan lebar tautan dan kemudian tautan akan tumbuh untuk mengisi ruang (menciptakan ruang di dalamnya). Terakhir,min-width:100%
Anda akan membuat gambar mengisi ruang yang dibuat di dalam tautan.Jika Anda mempertimbangkan
vw
satuan untuk ketinggian, Anda akan memiliki grid statis yang akan menskala sambil mempertahankan struktur keseluruhan yang sama:sumber
salah satu cara Anda dapat menyelesaikannya adalah dengan menambahkan
line-height: 0
kea
dan mengaturheight
nilai denganpx
nilai.sumber