CSS Image Gallery

किसी online art museum की visit करने की कल्पना करें। अगर सभी paintings floor पर एक विशाल ढेर में stacked होतीं, तो आप उन्हें enjoy नहीं कर पाते। आप चाहते हैं कि वे organized हों: साफ़ rows में arranged, खूबसूरती से framed, और spaced out ताकि आप उनके बीच चलकर उन्हें admire कर सकें। एक CSS image gallery वही organized art museum है। अपनी images को साफ़ grids में arrange करके, spacing जोड़कर, और hover effects लागू करके, आप अपनी photos को structured, responsive, और engaging रखते हैं।

In this page:

Gallery Grid Concept
Captions के साथ Image Cards को Style करना
Interactive Hover Zoom Effects
Flexbox के साथ Modern Galleries
Gallery Images पर CSS Object-Fit इस्तेमाल करना

Syntax

css

.gallery img {
  width: length;
  height: auto;
}
.gallery {
  display: flex | grid;
  gap: length;
}

Gallery Grid Concept

एक image gallery visual cards को साफ़, structured grids में organize करती है। एक fluid layout structure define करके और अपनी images को styled cards के अंदर wrap करके, आप अपनी photos को किसी भी screen size पर साफ़ तरीके से aligned रख सकते हैं।

Note: images load होते समय layout shifting रोकने के लिए हमेशा अपने image cards के अंदर width और height dimensions specify करें।

Warning: mobile screens पर horizontal scrolling रोकने के लिए अपनी gallery columns पर fixed pixel widths set करने से बचें।

उदाहरण: The Gallery Grid Concept

css

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
img {
  width: 100%;
  height: 120px;
}
</style>
<div class="gallery">
  <img src="https://placehold.co/150x120" alt="Photo">
  <img src="https://placehold.co/150x120" alt="Photo">
</div>

Captions के साथ Image Cards को Style करना

अपनी gallery को interactive बनाने के लिए, आप अपनी images को styled captions या description texts के साथ जोड़ सकते हैं। image और description को एक styled card box में wrap करना जानकारी को अपने visitors के लिए साफ़ बना देता है।

Note: अपनी images और caption text को semantically link करने के लिए semantic figure और figcaption elements इस्तेमाल करें।

Warning: सुनिश्चित करें कि आपका caption text card layout को cluttered होने से रोकने के लिए संक्षिप्त है।

उदाहरण: Styling Image Cards with Captions

css

<style>
figure {
  margin: 0;
}
figcaption {
  padding: 8px;
}
</style>
<figure>
  <img src="https://placehold.co/200x120" alt="Photo">
  <figcaption>A brief caption</figcaption>
</figure>

Interactive Hover Zoom Effects

आप अपनी image gallery को interactive और engaging बनाने के लिए custom hover animations (जैसे एक soft zoom effect) जोड़ सकते हैं। image को थोड़ा scale करके और card container के अंदर overflow को clip करके, आप एक polished, modern design बनाते हैं।

Note: अपनी zoom animations को smooth बनाने के लिए CSS transform scale() property को transitions के साथ combine करें।

Warning: zooming image को card borders से बाहर फैलने से रोकने के लिए हमेशा card container पर overflow: hidden set करें।

उदाहरण: Interactive Hover Zoom Effects

css

<style>
.card {
  overflow: hidden;
}
.card img {
  transition: transform 0.3s;
}
.card:hover img {
  transform: scale(1.1);
}
</style>
<div class="card">
  <img src="https://placehold.co/200x150" alt="Zooms on hover">
</div>

Flexbox के साथ Modern Galleries

Flexbox इस्तेमाल करना responsive image galleries बनाने का modern, standard तरीका है। यह आपके image cards को horizontally align करने और automatically नई lines में wrap होने देता है, किसी भी screen size के लिए perfectly adapt करते हुए।

Note: अपने cards के बीच spacing automatically distribute करने के लिए अपने flex gallery container पर justify-content: space-around इस्तेमाल करें।

Warning: cards को छोटे screens पर नई lines में move करने देने के लिए parent container पर flex-wrap: wrap लागू करें।

उदाहरण: Modern Galleries with Flexbox

css

<style>
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
img {
  width: 150px;
}
</style>
<div class="gallery">
  <img src="https://placehold.co/150x100" alt="Photo">
  <img src="https://placehold.co/150x100" alt="Photo">
</div>

Gallery Images पर CSS Object-Fit इस्तेमाल करना

अगर आपकी gallery images के aspect ratios अलग-अलग हैं, तो वे grid में misaligned दिख सकती हैं। आप अपनी images को बिना distort किए अपने containers भरने के लिए automatically crop और scale करने के लिए CSS object-fit: cover property इस्तेमाल कर सकते हैं।

Note:

object-fit: cover इस्तेमाल करते समय हमेशा अपने image elements पर एक defined height specify करें।
Accepted values:
fill — fit होने के लिए stretch होता है, distort हो सकता है (initial value)
contain — aspect ratio रखते हुए अंदर fit होता है
cover — aspect ratio रखते हुए box भरता है और crop करता है
none — natural size
scale-down — none और contain में से छोटा वाला
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: object-fit property सिर्फ तभी काम करती है जब image की एक defined width और height हो, वरना यह अपने native size पर display होगी।

उदाहरण: Using CSS Object-Fit on Gallery Images

css

<style>
img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}
</style>
<img src="https://placehold.co/300x150" alt="Cropped to fit without distortion">

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Advanced Dropdowns Next Lesson → CSS Image Sprites