การซูมภาพในรูปแบบกริด

การสร้างตารางรูปภาพเป็นเรื่องง่ายด้วย CSS Grid แต่การทำกริดทำสิ่งที่หรูหรา หลังจาก ภาพที่วางไว้อาจดึงออกได้ยาก

สมมติว่าคุณต้องการเพิ่มเอฟเฟกต์โฮเวอร์แฟนซีให้กับรูปภาพที่พวกเขาเติบโตและซูมเกินแถวและคอลัมน์ที่พวกเขานั่ง เราสามารถทำเช่นนั้นได้!

เจ๋งใช่มั้ย? หากคุณตรวจสอบโค้ด คุณจะไม่พบ JavaScript ตัวเลือกที่ซับซ้อน หรือแม้แต่ ตัวเลขมหัศจรรย์. และนี่เป็นเพียงตัวอย่างเดียวในหลาย ๆ ที่ที่เราจะสำรวจ!

การสร้างกริด

โค้ด HTML เพื่อสร้างกริดนั้นง่ายพอๆ กับรายการรูปภาพภายในคอนเทนเนอร์ เราไม่ต้องการมากกว่านั้น

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

สำหรับ CSS ก่อนอื่นเราเริ่มต้นด้วยการตั้งค่ากริดโดยใช้สิ่งต่อไปนี้:

.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);
}

กล่าวโดยย่อ เรามีสองตัวแปร ตัวแปรหนึ่งควบคุมขนาดของรูปภาพ และอีกตัวแปรหนึ่งกำหนดขนาดของช่องว่างระหว่างรูปภาพ aspect-ratio ช่วยจัดของตามสัดส่วน

คุณอาจสงสัยว่าทำไมเราถึงกำหนดแค่สามคอลัมน์แต่ไม่มีแถว ไม่ ฉันไม่ได้ลืมแถว เราแค่ไม่ต้องตั้งค่าให้ชัดเจน CSS Grid สามารถวางรายการโดยอัตโนมัติบน แถวและคอลัมน์โดยปริยายหมายความว่าเราได้แถวมากเท่าที่ต้องการสำหรับรูปภาพจำนวนเท่าใดก็ได้ที่เราโยนเข้าไป เราสามารถกำหนดแถวให้ชัดเจนแทนได้ แต่เราต้องเพิ่ม grid-auto-flow: column เพื่อให้แน่ใจว่าเบราว์เซอร์จะสร้างคอลัมน์ที่จำเป็นสำหรับเรา

นี่คือตัวอย่างเพื่อแสดงให้เห็นทั้งสองกรณี ความแตกต่างคือกระแสหนึ่งไหลในa row ทิศทางอื่น ๆ ใน a column ทิศทาง

เช็คเอาท์ บทความอื่นที่ฉันเขียนนี้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับกริดโดยปริยายและอัลกอริทึมการจัดตำแหน่งอัตโนมัติ

ตอนนี้เรามีตารางของเราแล้ว ก็ถึงเวลาจัดรูปแบบรูปภาพ:

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

เอฟเฟกต์โฮเวอร์ที่เรากำลังสร้างนั้นขึ้นอยู่กับ CSS นี้ อาจดูแปลกสำหรับคุณที่เรากำลังสร้างรูปภาพที่ไม่มีทั้งความกว้างหรือความสูง แต่มีความกว้างและความสูงขั้นต่ำ 100% แต่คุณจะเห็นว่ามันเป็นเคล็ดลับที่ค่อนข้างเรียบร้อยสำหรับสิ่งที่เราพยายามทำให้สำเร็จ

ที่ฉันทำอยู่นี้คือบอกเบราว์เซอร์ว่าต้องมีรูปภาพ 0 ความกว้างและความสูงแต่ต้องมีความสูงขั้นต่ำเท่ากับ 100%… แต่ 100% ของอะไร? เมื่อใช้เปอร์เซ็นต์ ค่าคือ เทียบกับอย่างอื่น. ในกรณีนี้ ภาพของเราอยู่ใน a เซลล์กริด และเราจำเป็นต้องรู้ขนาดนั้นเพื่อที่จะรู้ว่าคืออะไร 100% จะสัมพันธ์กับ

เบราว์เซอร์จะละเว้นก่อน min-height: 100% เพื่อคำนวณขนาดของเซลล์กริด แต่จะใช้ height: 0 ในการคำนวณ นั่นหมายความว่ารูปภาพของเราจะไม่ส่งผลต่อขนาดของเซลล์กริด… เพราะในทางเทคนิคแล้วรูปภาพเหล่านั้นไม่มีขนาดจริง ซึ่งจะส่งผลให้มีสามคอลัมน์และแถวที่เท่ากันซึ่งขึ้นอยู่กับขนาดของกริด (ซึ่งเรากำหนดไว้บน .galleryความกว้างและ aspect-ratio). ความสูงของเซลล์กริดแต่ละเซลล์ไม่มีอะไรเลยนอกจากตัวแปร --s เรากำหนด (เหมือนกันสำหรับความกว้าง)

ตอนนี้เรามีมิติของเซลล์ของกริดแล้ว เบราว์เซอร์จะใช้กับ min-height: 100% (และ min-width: 100%) ซึ่งจะบังคับให้รูปภาพเติมพื้นที่ว่างของเซลล์กริดแต่ละเซลล์ให้สมบูรณ์ สิ่งทั้งหมดอาจดูสับสนเล็กน้อย แต่แนวคิดหลักคือต้องแน่ใจว่าตารางกำหนดขนาดของรูปภาพมากกว่าวิธีอื่น ฉันไม่ต้องการให้รูปภาพกำหนดขนาดของกริด และคุณจะเข้าใจว่าทำไมหลังจากเพิ่มเอฟเฟกต์โฮเวอร์

การสร้างเอฟเฟกต์โฮเวอร์

สิ่งที่เราต้องทำคือเพิ่มขนาดของภาพเมื่อวางเมาส์ไว้ เราสามารถทำได้โดยการปรับภาพ width และ 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));
}

ฉันเพิ่มตัวแปรที่กำหนดเองใหม่ --fเพื่อผสมเป็นปัจจัยมาตราส่วนเพื่อควบคุมขนาดเมื่อวางเมาส์เหนือ สังเกตว่าผมคูณตัวแปรขนาดอย่างไร --sโดยจะคำนวณขนาดภาพใหม่

แต่คุณบอกว่าขนาดภาพต้องเป็น 0 เกิดอะไรขึ้น? ฉันหลงทาง…

ที่ฉันพูดไปยังคงเป็นจริง แต่ฉันกำลังยกเว้นรูปภาพที่ลอยอยู่ ฉันกำลังบอกเบราว์เซอร์ว่ามีเพียงภาพเดียวเท่านั้นที่มีขนาดที่ไม่เท่ากับศูนย์ — ดังนั้นมันจึงมีส่วนทำให้เกิดมิติของกริด — ในขณะที่ภาพอื่นๆ ทั้งหมดยังคงเท่ากับ 0.

ด้านซ้ายแสดงเส้นตารางในสภาพธรรมชาติโดยไม่มีภาพโฮเวอร์ ซึ่งเป็นสิ่งที่ด้านขวาแสดง เซลล์กริดทั้งหมดทางด้านซ้ายมีขนาดเท่ากัน เนื่องจากรูปภาพทั้งหมดไม่มีมิติทางกายภาพ

ทางด้านขวา รูปภาพที่สองในแถวแรกจะถูกโฮเวอร์ ซึ่งทำให้มีขนาดที่ส่งผลต่อขนาดของเซลล์กริด เบราว์เซอร์จะทำให้เซลล์กริดนั้นใหญ่ขึ้นเมื่อวางเมาส์เหนือ ซึ่งส่งผลต่อขนาดโดยรวม และเนื่องจากขนาดของกริดทั้งหมดถูกกำหนด (เพราะเราตั้งค่าคงที่ width บน .gallery) กริดเซลล์อื่นๆ จะตอบสนองตามตรรกะโดยมีขนาดเล็กลงเพื่อรักษา .galleryขนาดโดยรวมอยู่ในชั้นเชิง

นั่นคือเอฟเฟกต์การซูมของเราในการดำเนินการ! การเพิ่มขนาดของรูปภาพเพียงภาพเดียว เราส่งผลต่อการกำหนดค่ากริดทั้งหมด และเราได้กล่าวก่อนหน้านี้ว่า ตารางกำหนดขนาดของรูปภาพ เพื่อให้แต่ละรูปภาพขยายภายในเซลล์กริดเพื่อเติมพื้นที่ทั้งหมด

ในการนี้ เราเพิ่มสัมผัสของ transition และการใช้งาน object-fit เพื่อหลีกเลี่ยงความผิดเพี้ยนของภาพและภาพลวงตาที่สมบูรณ์แบบ!

ฉันรู้ว่าตรรกะเบื้องหลังเคล็ดลับนั้นไม่ง่ายที่จะเข้าใจ ไม่ต้องกังวลหากคุณไม่เข้าใจอย่างถ่องแท้ สิ่งสำคัญที่สุดคือต้องเข้าใจโครงสร้างของโค้ดที่ใช้และวิธีแก้ไขเพื่อให้ได้รูปแบบที่หลากหลายมากขึ้น นั่นคือสิ่งที่เราจะทำต่อไป!

กำลังเพิ่มรูปภาพ

เราสร้างตารางขนาด 3×3 เพื่ออธิบายเคล็ดลับหลัก แต่คุณอาจเดาได้ว่าเราไม่จำเป็นต้องหยุดเพียงแค่นั้น เราสามารถสร้างตัวแปรจำนวนคอลัมน์และแถวและเพิ่มรูปภาพได้มากเท่าที่เราต้องการ

.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);
}

เรามีตัวแปรใหม่สองตัวสำหรับจำนวนแถวและคอลัมน์ จากนั้นเราเพียงแค่กำหนดความกว้างและความสูงของกริดของเราโดยใช้พวกมัน เหมือนกันสำหรับ grid-template-columns ซึ่งใช้ --m ตัวแปร. และเหมือนเมื่อก่อน เราไม่จำเป็นต้องกำหนดแถวให้ชัดเจน เนื่องจากคุณสมบัติการจัดตำแหน่งอัตโนมัติของ CSS Grid จะทำงานให้เราไม่ว่าเราจะใช้องค์ประกอบรูปภาพกี่องค์ประกอบ

ทำไมไม่ให้ค่าความกว้างและความสูงแตกต่างกัน? เราสามารถทำเช่นนั้นได้:

.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));
}

เราเปลี่ยน --s ด้วยสองตัวแปร หนึ่งสำหรับความกว้าง --wและอีกอันสำหรับความสูง --h. จากนั้นเราจะปรับอย่างอื่นตามนั้น

ดังนั้นเราจึงเริ่มต้นด้วยตารางที่มีขนาดคงที่และจำนวนองค์ประกอบ แต่จากนั้นเราก็สร้างตัวแปรชุดใหม่เพื่อรับการกำหนดค่าที่เราต้องการ สิ่งที่เราต้องทำคือเพิ่มรูปภาพให้มากที่สุดเท่าที่เราต้องการและปรับตัวแปร CSS ให้เหมาะสม ชุดค่าผสมนั้นไร้ขีด จำกัด !

แกลเลอรี่ภาพแบบเต็มหน้าจอ

แล้วเวอร์ชั่นเต็มจอล่ะ? ใช่ นั่นก็เป็นไปได้เช่นกัน ทั้งหมดที่เราต้องการคือการรู้ว่าเราต้องกำหนดค่าใดให้กับตัวแปรของเรา ถ้าเราต้องการ N แถวของรูปภาพและเราต้องการให้ตารางของเราเต็มหน้าจอ เราต้องแก้ความสูงของ .ก่อน 100vh:

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

ตรรกะเดียวกันสำหรับความกว้าง แต่ใช้ vw แทน vh:

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

เราทำคณิตศาสตร์เพื่อให้ได้:

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

ทำ!

เป็น HTML ที่เหมือนกันทุกประการ แต่มีตัวแปรที่อัปเดตบางตัวที่เปลี่ยนขนาดและพฤติกรรมของกริด

โปรดทราบว่าฉันได้ละเว้นสูตรที่เราตั้งไว้ก่อนหน้านี้ใน .gallery's width และ height และแทนที่ด้วย 100vw และ 100vhตามลำดับ สูตรจะให้ผลลัพธ์แบบเดียวกัน แต่เนื่องจากเรารู้ว่าเราต้องการค่าอะไร เราจึงสามารถละทิ้งความซับซ้อนที่เพิ่มเข้ามาได้ทั้งหมด

นอกจากนี้เรายังสามารถลดความซับซ้อนของ --h และ --w โดยเอาช่องว่างออกจากสมการเพื่อสิ่งนี้:

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

สิ่งนี้จะทำให้ภาพที่โฮเวอร์เติบโตมากกว่าตัวอย่างก่อนหน้านี้เล็กน้อย แต่ก็ไม่ใช่เรื่องใหญ่เพราะเราสามารถควบคุมมาตราส่วนด้วย --f ตัวแปรที่เราใช้เป็นตัวคูณ

และเนื่องจากตัวแปรถูกใช้ในที่เดียว เรายังสามารถทำให้โค้ดง่ายขึ้นโดยลบออกทั้งหมด:

สิ่งสำคัญที่ควรทราบคือการปรับให้เหมาะสมนี้ใช้ได้กับตัวอย่างแบบเต็มหน้าจอเท่านั้น ไม่ใช่กับตัวอย่างที่เราพูดถึง ตัวอย่างนี้เป็นกรณีเฉพาะที่เราสามารถทำให้โค้ดดูจางลงได้โดยการลบการคำนวณที่ซับซ้อนบางส่วนที่เราต้องการในตัวอย่างอื่นๆ

เรามีทุกสิ่งที่จำเป็นในการสร้างรูปแบบการขยายแผงที่เป็นที่นิยม:

มาเจาะลึกกันดีกว่า

คุณสังเกตหรือไม่ว่าตัวคูณสเกลของเราอาจน้อยกว่า 1? เราสามารถกำหนดขนาดของภาพที่โฮเวอร์ให้เล็กกว่า --h or --w แต่ภาพจะใหญ่ขึ้นเมื่อโฮเวอร์

ขนาดเซลล์กริดเริ่มต้นเท่ากับ --w และ --hเหตุใดค่าที่น้อยกว่าจึงทำให้เซลล์กริด ที่ใหญ่กว่า? เซลล์ไม่ควรได้รับ มีขนาดเล็กกว่าหรืออย่างน้อยก็รักษาขนาดเริ่มต้นไว้ และขนาดสุดท้ายของเซลล์กริดคืออะไร?

เราจำเป็นต้องเจาะลึกว่าอัลกอริทึม CSS Grid คำนวณขนาดของเซลล์กริดอย่างไร และนี่คือการทำความเข้าใจค่าเริ่มต้นของ CSS Grid การจัดตำแหน่งยืด.

นี่คือตัวอย่างเพื่อทำความเข้าใจตรรกะ

ที่ด้านซ้ายของการสาธิต ฉันกำหนดสองคอลัมน์ด้วย auto ความกว้าง. เราได้ผลลัพธ์ที่เข้าใจง่าย: สองคอลัมน์เท่ากัน (และเซลล์กริดที่เท่ากันสองเซลล์) แต่กริดที่ฉันตั้งค่าไว้ทางด้านขวาของการสาธิต ซึ่งฉันกำลังอัปเดตการจัดตำแหน่งโดยใช้ place-content: start, ดูเหมือนจะไม่มีอะไร

DevTools ช่วยแสดงให้เราเห็นว่าเกิดอะไรขึ้นในทั้งสองกรณี:

ในตารางที่สอง เรามีสองคอลัมน์ แต่ความกว้างเท่ากับศูนย์ ดังนั้นเราจึงได้เซลล์กริดสองเซลล์ที่ยุบอยู่ที่มุมซ้ายบนของคอนเทนเนอร์กริด นี่คือ ไม่ ข้อผิดพลาด แต่ผลลัพธ์เชิงตรรกะของการจัดตำแหน่งของกริด เมื่อเราปรับขนาดคอลัมน์ (หรือแถว) ด้วย autoหมายความว่าเนื้อหากำหนดขนาดของมัน — แต่เรามีความว่างเปล่า div โดยไม่มีเนื้อหาที่จะให้

แต่ตั้งแต่ stretch เป็นการจัดตำแหน่งเริ่มต้นและเรามีพื้นที่เพียงพอภายในกริดของเรา เบราว์เซอร์จะขยายเซลล์กริดทั้งสองเท่าๆ กันเพื่อให้ครอบคลุมพื้นที่ทั้งหมดนั้น นั่นเป็นวิธีที่กริดทางด้านซ้ายขึ้นเป็นสองคอลัมน์เท่ากัน

จาก ข้อมูลจำเพาะ:

โปรดทราบว่าค่าบางอย่างของ justify-content และ align-content อาจทำให้รอยแยกห่างกันได้ (space-around, space-between, space-evenly) หรือจะปรับขนาด (stretch).

สังเกต "จะปรับขนาด" ซึ่งเป็นกุญแจสำคัญที่นี่ ในตัวอย่างที่แล้ว ฉันใช้ place-content ซึ่งเป็นชวเลขสำหรับ justify-content และ align-content

และสิ่งนี้ถูกฝังอยู่ที่ไหนสักแห่งใน อัลกอริทึมการปรับขนาดกริด รายละเอียด:

ขั้นตอนนี้ขยายแทร็กที่มี รถยนต์ ฟังก์ชั่นการปรับขนาดแทร็กสูงสุด โดยหารค่าบวกที่เหลือ ชัดเจน พื้นที่ว่าง อย่างเท่าเทียมกันในหมู่พวกเขา หากพื้นที่ว่างคือ ไม่แน่นอนแต่ คอนเทนเนอร์กริด มีความแน่นอน นาทีความกว้าง/ความสูงให้ใช้ขนาดนั้นเพื่อคำนวณพื้นที่ว่างสำหรับขั้นตอนนี้แทน

"เท่าเทียมกัน" อธิบายว่าทำไมเราถึงจบลงด้วยเซลล์กริดที่เท่ากัน แต่ใช้กับ "พื้นที่ว่าง" ซึ่งสำคัญมาก

มาดูตัวอย่างก่อนหน้านี้และเพิ่มเนื้อหาให้กับหนึ่งใน divs:

เราเพิ่มสี่เหลี่ยม 50px ภาพ. นี่คือภาพประกอบว่าแต่ละตารางในตัวอย่างของเราตอบสนองต่อภาพนั้นอย่างไร:

ในกรณีแรก เราจะเห็นว่าเซลล์แรก (สีแดง) มีขนาดใหญ่กว่าเซลล์ที่สอง (สีน้ำเงิน) ในกรณีที่สอง ขนาดของเซลล์แรกจะเปลี่ยนเพื่อให้พอดีกับขนาดทางกายภาพของรูปภาพ ในขณะที่เซลล์ที่สองยังคงอยู่โดยไม่มีมิติ พื้นที่ว่างถูกแบ่งเท่า ๆ กัน แต่เซลล์แรกมีเนื้อหาภายในมากกว่าซึ่งทำให้ใหญ่ขึ้น

นี่คือคณิตศาสตร์ในการหาพื้นที่ว่างของเรา:

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

หารด้วยสอง — จำนวนคอลัมน์ — เราได้ความกว้างของ 72.5px สำหรับแต่ละคอลัมน์ แต่เราเพิ่มขนาดของภาพ 50px, ไปยังคอลัมน์แรกที่ปล่อยให้เรามีหนึ่งคอลัมน์ที่ 122.5px และอันที่สองเท่ากับ 72.5px.

ตรรกะเดียวกันกับตารางรูปภาพของเรา รูปภาพทั้งหมดมีขนาดเท่ากับ 0 (ไม่มีเนื้อหา) ในขณะที่ภาพที่โฮเวอร์นั้นมีส่วนทำให้มีขนาด — แม้ว่าจะเป็นเพียง 1px — ทำให้กริดเซลล์มีขนาดใหญ่กว่าเซลล์อื่น ด้วยเหตุผลนี้ ตัวประกอบมาตราส่วนสามารถมีค่าใด ๆ ที่มากกว่า 0 ทศนิยมระหว่าง 0 และ 1.

เพื่อให้ได้ความกว้างสุดท้ายของเซลล์กริด เราทำการคำนวณเดียวกันเพื่อให้ได้สิ่งต่อไปนี้:

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

ความกว้างของคอนเทนเนอร์ถูกกำหนดโดย:

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

…และช่องว่างทั้งหมดมีค่าเท่ากับ:

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

…และสำหรับภาพที่โฮเวอร์ เรามี:

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

เราสามารถคำนวณได้ทั้งหมดด้วยตัวแปรของเรา:

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

จำนวนคอลัมน์ถูกกำหนดโดย --m ดังนั้นเราจึงแบ่งพื้นที่ว่างนั้นเท่าๆ กันเพื่อให้ได้:

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

…ซึ่งทำให้เรามีขนาดของภาพที่ไม่มีการโฮเวอร์ สำหรับภาพที่โฮเวอร์ เรามีสิ่งนี้:

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

หากเราต้องการควบคุมขนาดสุดท้ายของภาพที่โฮเวอร์ เราจะพิจารณาสูตรข้างต้นเพื่อให้ได้ขนาดที่แน่นอนตามที่เราต้องการ ตัวอย่างเช่น หากเราต้องการให้รูปภาพมีขนาดใหญ่เป็นสองเท่า:

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

ดังนั้น ค่าของตัวคูณมาตราส่วนของเรา --f, จะต้องเท่ากับ:

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

สำหรับสามคอลัมน์เราจะมี 3/2 = 1.5 และนั่นคือสเกลแฟกเตอร์ที่ฉันใช้ในการสาธิตครั้งแรกของบทความนี้ เพราะฉันต้องการทำให้รูปภาพใหญ่ขึ้นเป็นสองเท่าเมื่อวางเมาส์ไว้!

ตรรกะเดียวกันนี้ใช้กับการคำนวณความสูง และในกรณีที่เราต้องการควบคุมทั้งสองอย่างแยกจากกัน เราจะต้องพิจารณาปัจจัยสเกลสองปัจจัยเพื่อให้แน่ใจว่าเรามีความกว้างและความสูงเฉพาะเมื่อวางเมาส์เหนือ

.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));
}

ตอนนี้ คุณรู้เคล็ดลับทั้งหมดในการสร้างตารางรูปภาพชนิดใดก็ได้ด้วยเอฟเฟกต์โฮเวอร์ที่ยอดเยี่ยม ในขณะเดียวกันก็ควบคุมขนาดที่คุณต้องการได้โดยใช้คณิตศาสตร์ที่เราเพิ่งพูดถึง

ตัดขึ้น

ในฉัน บทความล่าสุดเราสร้างกริดที่ดูซับซ้อนด้วย CSS สองสามบรรทัดที่นำคุณสมบัติกริดโดยปริยายของ CSS Grid และการจัดตำแหน่งอัตโนมัติมาใช้ ในบทความนี้ เราอาศัยกลอุบายการปรับขนาด CSS Grid เพื่อสร้างตารางรูปภาพแฟนซีที่ซูมเมื่อโฮเวอร์และทำให้กริดปรับตามนั้น ทั้งหมดนี้ด้วยโค้ดแบบง่ายที่ปรับเปลี่ยนได้ง่ายโดยใช้ตัวแปร CSS!

บทความถัดไปเราจะมาเล่นเป็นรูปทรงกันเถอะ! เราจะรวม CSS grid กับ mask และ clip-path เพื่อให้ได้ภาพที่สวยงาม