Memperbesar Gambar dalam Tata Letak Kotak

Membuat grid gambar itu mudah, berkat CSS Grid. Tapi membuat grid melakukan hal-hal mewah setelah gambar yang telah ditempatkan bisa jadi sulit untuk ditarik.

Katakanlah Anda ingin menambahkan beberapa efek hover mewah ke gambar di mana mereka tumbuh dan memperbesar melampaui baris dan kolom tempat mereka duduk? Kita bisa melakukannya!

Keren, kan? Jika Anda memeriksa kodenya, Anda tidak akan menemukan JavaScript, pemilih kompleks, atau bahkan angka ajaib. Dan ini hanya satu contoh di antara banyak yang akan kita jelajahi!

Membangun jaringan

Kode HTML untuk membuat kisi sesederhana daftar gambar di dalam wadah. Kami tidak membutuhkan lebih dari itu.

<div class="gallery">
  <img>
  <img>
  <img>
  <!-- etc. -->
</div>

Untuk CSS, pertama-tama kita mulai dengan mengatur grid menggunakan yang berikut:

.gallery {
  --s: 150px; /* controls the size */
  --g: 10px;  /* controls the gap */

  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);
}

Singkatnya, kami memiliki dua variabel, satu yang mengontrol ukuran gambar dan satu lagi yang mengatur ukuran jarak antar gambar. aspect-ratio membantu menjaga hal-hal dalam proporsi.

Anda mungkin bertanya-tanya mengapa kami hanya mendefinisikan tiga kolom tetapi tidak ada baris. Tidak, saya tidak melupakan barisnya — kita hanya tidak perlu mengaturnya secara eksplisit. CSS Grid mampu secara otomatis menempatkan item pada baris dan kolom implisit, artinya kita mendapatkan baris sebanyak yang diperlukan untuk sejumlah gambar yang kita lempar. Kita dapat secara eksplisit mendefinisikan baris sebagai gantinya tetapi kita perlu menambahkan grid-auto-flow: column untuk memastikan browser akan membuat kolom yang diperlukan untuk kita.

Berikut adalah contoh untuk menggambarkan kedua kasus. Perbedaannya adalah bahwa satu mengalir dalam row arah yang lain di a column arah.

Beli artikel lain ini saya tulis untuk mengetahui lebih lanjut tentang kisi implisit dan algoritme penempatan otomatis.

Sekarang setelah kita memiliki grid, saatnya untuk menata gambar:

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

Efek hover yang kita buat bergantung pada CSS ini. Mungkin terlihat aneh bagi Anda bahwa kami membuat gambar yang tidak memiliki lebar atau tinggi tetapi memiliki lebar dan tinggi minimum 100%. Tetapi Anda akan melihat bahwa itu adalah trik yang cukup rapi untuk apa yang kami coba capai.

Apa yang saya lakukan di sini adalah memberi tahu browser bahwa gambar harus dimiliki 0 lebar dan tinggi tetapi juga harus memiliki tinggi minimum yang sama dengan 100%… Tapi 100% dari apa? Saat menggunakan persentase, nilainya adalah relatif terhadap sesuatu yang lain. Dalam hal ini, gambar kita ditempatkan di dalam a sel kisi dan kita perlu tahu ukuran itu untuk mengetahui apa itu 100% adalah relatif terhadap.

Browser pertama-tama akan mengabaikan min-height: 100% untuk menghitung ukuran sel kisi, tetapi akan menggunakan height: 0 dalam perhitungannya. Itu berarti gambar kita tidak akan berkontribusi pada ukuran sel grid… karena secara teknis tidak memiliki ukuran fisik. Ini akan menghasilkan tiga kolom dan baris yang sama yang didasarkan pada ukuran kisi (yang kami definisikan di .gallerylebar dan aspect-ratio). Ketinggian setiap sel kisi tidak lain adalah variabel --s kami mendefinisikan (sama untuk lebar).

Sekarang kita memiliki dimensi sel grid kita, browser akan menggunakannya dengan min-height: 100% (Dan min-width: 100%) yang akan memaksa gambar untuk sepenuhnya mengisi ruang setiap sel kisi. Semuanya mungkin terlihat sedikit membingungkan tetapi ide utamanya adalah memastikan bahwa kisi-kisi menentukan ukuran gambar daripada sebaliknya. Saya tidak ingin gambar menentukan ukuran kisi dan Anda akan mengerti mengapa setelah menambahkan efek hover.

Membuat efek melayang

Yang perlu kita lakukan adalah meningkatkan skala gambar saat mereka melayang. Kita bisa melakukannya dengan menyesuaikan gambar width dan height on :hover:

.gallery {
  --f: 1.5; /* controls the scale factor */
}

.gallery img:hover{
  width:  calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
}

Saya menambahkan variabel khusus baru, --f, ke campuran sebagai faktor skala untuk mengontrol ukuran saat mengarahkan kursor. Perhatikan bagaimana saya mengalikan variabel ukuran, --s, dengan itu untuk menghitung ukuran gambar baru.

Tetapi Anda mengatakan bahwa ukuran gambar harus 0. Apa yang terjadi? Saya tersesat…

Apa yang saya katakan masih benar tetapi saya membuat pengecualian untuk gambar melayang. Saya memberi tahu browser bahwa hanya satu gambar yang akan memiliki ukuran yang tidak sama dengan nol — jadi itu akan berkontribusi pada dimensi kisi — sementara yang lainnya tetap sama dengan 0.

Sisi kiri menunjukkan kisi dalam keadaan alaminya tanpa gambar melayang, yang ditunjukkan oleh sisi kanan. Semua sel grid di sisi kiri berukuran sama karena semua gambar tidak memiliki dimensi fisik.

Di sisi kanan, gambar kedua di baris pertama melayang, yang memberikan dimensi yang memengaruhi ukuran sel kisi. Peramban akan membuat sel kisi spesifik itu lebih besar saat mengarahkan kursor, yang berkontribusi pada ukuran keseluruhan. Dan karena ukuran seluruh grid diatur (karena kami menetapkan tetap width pada .gallery), sel-sel grid lainnya secara logis akan merespons dengan menjadi lebih kecil untuk menjaga .galleryukuran keseluruhan dalam bijaksana.

Itulah efek zoom kami beraksi! Dengan meningkatkan ukuran hanya satu gambar, kami memengaruhi seluruh konfigurasi kisi, dan kami katakan sebelumnya bahwa kisi menentukan ukuran gambar sehingga setiap gambar membentang di dalam sel kisinya untuk mengisi semua ruang.

Untuk ini, kami menambahkan sentuhan transition Dan gunakan object-fit untuk menghindari distorsi gambar dan ilusi sempurna!

Saya tahu bahwa logika di balik trik ini tidak mudah untuk dipahami. Jangan khawatir jika Anda tidak sepenuhnya memahaminya. Yang paling penting adalah memahami struktur kode yang digunakan dan cara memodifikasinya untuk mendapatkan lebih banyak variasi. Itulah yang akan kita lakukan selanjutnya!

Menambahkan lebih banyak gambar

Kami membuat kotak 3x3 untuk menjelaskan trik utama, tetapi Anda mungkin telah menebak bahwa kami tidak perlu berhenti di situ. Kita dapat membuat variabel jumlah kolom dan baris dan menambahkan gambar sebanyak yang kita inginkan.

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

Kami memiliki dua variabel baru untuk jumlah baris dan kolom. Kemudian kita cukup menentukan lebar dan tinggi grid kita menggunakan mereka. Sama untuk grid-template-columns yang menggunakan --m variabel. Dan seperti sebelumnya, kita tidak perlu mendefinisikan baris secara eksplisit karena fitur penempatan otomatis Grid CSS akan melakukan pekerjaan untuk kita tidak peduli berapa banyak elemen gambar yang kita gunakan.

Mengapa nilai lebar dan tinggi tidak berbeda? Kita bisa melakukan itu:

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --h: 120px; /* control the height */
  --w: 150px; /* control the width */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

.gallery img:hover{
  width:  calc(var(--w)*var(--f));
  height: calc(var(--h)*var(--f));
}

Kami mengganti --s dengan dua variabel, satu untuk lebar, --w, dan satu lagi untuk ketinggian, --h. Kemudian kami menyesuaikan segala sesuatu yang lain sesuai dengan itu.

Jadi, kami mulai dengan kisi dengan ukuran dan jumlah elemen tetap, tetapi kemudian kami membuat satu set variabel baru untuk mendapatkan konfigurasi apa pun yang kami inginkan. Yang harus kita lakukan adalah menambahkan gambar sebanyak yang kita inginkan dan menyesuaikan variabel CSS yang sesuai. Kombinasinya tidak terbatas!

Galeri gambar layar penuh

Bagaimana dengan versi layar penuh? Ya, itu juga mungkin. Yang kita butuhkan hanyalah mengetahui nilai apa yang perlu kita tetapkan ke variabel kita. Jika kita mau N baris gambar dan kami ingin kisi kami menjadi layar penuh, pertama-tama kami harus memecahkan ketinggian 100vh:

var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vh

Logika yang sama untuk lebarnya, tetapi menggunakan vw alih-alih vh:

var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vw

Kami melakukan matematika untuk mendapatkan:

--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)

Selesai!

Ini adalah HTML yang sama persis tetapi dengan beberapa variabel yang diperbarui yang mengubah ukuran dan perilaku kisi.

Perhatikan bahwa saya telah menghilangkan rumus yang sebelumnya kita atur pada .gallery's width dan height dan menggantinya dengan 100vw dan 100vh, masing-masing. Rumusnya akan memberi kita hasil yang sama tetapi karena kita tahu nilai apa yang kita inginkan, kita dapat membuang semua kerumitan tambahan itu.

Kita juga dapat menyederhanakan --h dan --w dengan menghilangkan kesenjangan dari persamaan yang mendukung ini:

--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */

Ini akan membuat gambar melayang sedikit lebih besar dari contoh sebelumnya, tetapi itu bukan masalah besar karena kita dapat mengontrol skala dengan --f variabel yang kita gunakan sebagai pengganda.

Dan karena variabel digunakan di satu tempat, kami masih dapat menyederhanakan kode dengan menghapusnya sama sekali:

Penting untuk diperhatikan bahwa pengoptimalan ini hanya berlaku untuk contoh layar penuh dan tidak untuk contoh yang telah kita bahas. Contoh ini adalah kasus tertentu di mana kita dapat membuat kode lebih ringan dengan menghapus beberapa pekerjaan perhitungan kompleks yang kita butuhkan dalam contoh lain.

Kami sebenarnya memiliki semua yang kami butuhkan untuk membuat pola populer untuk memperluas panel:

Mari kita menggali lebih dalam

Apakah Anda memperhatikan bahwa faktor skala kami bisa kurang dari 1? Kita dapat menentukan ukuran gambar yang dilayangkan menjadi lebih kecil dari --h or --w tetapi gambar menjadi lebih besar saat melayang.

Ukuran sel kisi awal sama dengan --w dan --h, jadi mengapa nilai yang lebih kecil membuat sel kisi lebih besar? Bukankah seharusnya sel mendapatkan lebih kecil, atau setidaknya mempertahankan ukuran awalnya? Dan berapa ukuran akhir sel grid?

Kita perlu menggali lebih dalam bagaimana algoritma CSS Grid menghitung ukuran sel grid. Dan ini melibatkan pemahaman default CSS Grid peregangan keselarasan.

Berikut adalah contoh untuk memahami logika.

Di sisi kiri demo, saya mendefinisikan dua kolom dengan auto lebar. Kami mendapatkan hasil intuitif: dua kolom yang sama (dan dua sel grid yang sama). Tapi kisi yang saya atur di sisi kanan demo, di mana saya memperbarui perataan menggunakan place-content: start, tampaknya tidak memiliki apa-apa.

DevTools membantu menunjukkan kepada kami apa yang sebenarnya terjadi dalam kedua kasus:

Di kisi kedua, kami memiliki dua kolom, tetapi lebarnya sama dengan nol, jadi kami mendapatkan dua sel kisi yang diciutkan di sudut kiri atas wadah kisi. Ini adalah tidak bug tetapi hasil logis dari penyelarasan grid. Saat kita mengukur kolom (atau baris) dengan auto, itu berarti isinya menentukan ukurannya — tetapi kami memiliki yang kosong div tanpa konten untuk memberi ruang.

Tapi sejak itu stretch adalah penyelarasan default dan kami memiliki cukup ruang di dalam kisi kami, browser akan meregangkan kedua sel kisi secara merata untuk menutupi semua area itu. Begitulah grid di sebelah kiri berakhir dengan dua kolom yang sama.

Dari spesifikasi:

Perhatikan bahwa nilai-nilai tertentu dari justify-content dan align-content dapat menyebabkan trek menjadi terpisah (space-around, space-between, space-evenly) atau diubah ukurannya (stretch).

Perhatikan "untuk diubah ukurannya" yang merupakan kuncinya di sini. Dalam contoh terakhir, saya menggunakan place-content yang merupakan singkatan dari justify-content dan align-content

Dan ini terkubur di suatu tempat di algoritma Ukuran Grid spesifikasi:

Langkah ini memperluas trek yang memiliki mobil fungsi ukuran trek maks dengan membagi sisa positif, pasti ruang bebas sama di antara mereka. Jika ruang kosong adalah tak terbatas, Tetapi wadah kotak memiliki pasti min-lebar/tinggi, gunakan ukuran tersebut untuk menghitung ruang kosong untuk langkah ini.

"Equally" menjelaskan mengapa kita berakhir dengan sel grid yang sama, tetapi ini berlaku untuk "ruang kosong" yang sangat penting.

Mari kita ambil contoh sebelumnya dan tambahkan konten ke salah satu dari divs:

Kami menambahkan persegi 50px gambar. Berikut adalah ilustrasi bagaimana setiap kisi dalam contoh kita merespons gambar itu:

Dalam kasus pertama, kita dapat melihat bahwa sel pertama (berwarna merah) lebih besar dari yang kedua (berwarna biru). Dalam kasus kedua, ukuran sel pertama berubah agar sesuai dengan ukuran fisik gambar sedangkan sel kedua tetap tanpa dimensi. Ruang kosong dibagi rata, tetapi sel pertama memiliki lebih banyak konten di dalamnya yang membuatnya lebih besar.

Ini adalah matematika untuk mengetahui ruang kosong kami:

(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px 

Dibagi dua — jumlah kolom — kita mendapatkan lebar 72.5px untuk setiap kolom. Tapi kami menambahkan ukuran gambar, 50px, ke kolom pertama yang menyisakan satu kolom di 122.5px dan yang kedua sama dengan 72.5px.

Logika yang sama berlaku untuk grid gambar kita. Semua gambar memiliki ukuran yang sama dengan 0 (tidak ada konten) sementara gambar yang dilayangkan berkontribusi pada ukuran — meskipun hanya 1px — membuat sel gridnya lebih besar dari yang lain. Untuk alasan ini, faktor skala dapat berupa nilai apa pun yang lebih besar dari 0 bahkan desimal antara 0 dan 1.

Untuk mendapatkan lebar akhir sel grid, kami melakukan perhitungan yang sama untuk mendapatkan yang berikut:

(container width) - (sum of all gaps) - (hovered image width) = (free space)

Lebar wadah ditentukan oleh:

var(--m)*var(--w) + (var(--m) - 1)*var(--g)

…dan semua celahnya sama dengan:

(var(--m) - 1)*var(--g)

…dan untuk gambar melayang yang kita miliki:

var(--w)*var(--f)

Kami dapat menghitung semua itu dengan variabel kami:

var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))

Jumlah kolom ditentukan oleh --m , jadi kami membagi ruang kosong itu secara merata untuk mendapatkan:

var(--w)*(var(--m) - var(--f))/var(--m)

…yang memberi kita ukuran gambar yang tidak diarahkan. Untuk gambar melayang, kami memiliki ini:

var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))

Jika kita ingin mengontrol ukuran akhir dari gambar melayang, kita pertimbangkan rumus di atas untuk mendapatkan ukuran yang tepat yang kita inginkan. Jika, misalnya, kita ingin gambar menjadi dua kali lebih besar:

(var(--m) - var(--f))/var(--m) + var(--f) = 2

Jadi, nilai pengganda skala kami, --f, harus sama dengan:

var(--m)/(var(--m) - 1)

Untuk tiga kolom kita akan memiliki 3/2 = 1.5 dan itulah faktor skala yang saya gunakan dalam demo pertama artikel ini karena saya ingin membuat gambar dua kali lebih besar saat melayang!

Logika yang sama berlaku untuk perhitungan tinggi dan jika kita ingin mengontrol keduanya secara independen, kita perlu mempertimbangkan dua faktor skala untuk memastikan kita memiliki lebar dan tinggi tertentu saat melayang.

.gallery {
  /* same as before */
   --fw: 1.5; /* controls the scale factor for the width */
   --fh: 1.2; /* controls the scale factor for the height */

  /* same as before */
}

.gallery img:hover{
  width:  calc(var(--w)*var(--fw));
  height: calc(var(--h)*var(--fh));
}

Sekarang, Anda tahu semua rahasia untuk membuat segala jenis kisi gambar dengan efek hover yang keren sambil juga mengontrol ukuran yang Anda inginkan menggunakan matematika yang baru saja kita bahas.

Membungkus

Dalam saya artikel terakhir, kami membuat kisi yang tampak rumit dengan beberapa baris CSS yang menggunakan kisi implisit dan fitur penempatan otomatis Grid CSS untuk digunakan. Dalam artikel ini, kami mengandalkan beberapa tipuan ukuran Grid CSS untuk membuat kisi-kisi gambar yang bagus yang memperbesar kursor dan menyebabkan kisi-kisi menyesuaikannya. Semua ini dengan kode sederhana yang mudah disesuaikan menggunakan variabel CSS!

Di artikel selanjutnya, kita akan bermain dengan bentuk! Kami akan menggabungkan grid CSS dengan mask dan clip-path untuk mendapatkan grid gambar yang bagus.