🖼️ Card Gallery with Grid

Responsive cards with perfect image sizing using aspect-ratio and object-fit
1. Basic Card Gallery
Responsive grid cards with 16:9 images. Images cover the area without stretching.
🏔️
Mountain Retreat
Beautiful mountain views and fresh air. Perfect for weekend getaways.
🏖️
Beach Paradise
White sandy beaches and crystal clear water.
🏯
City Explorer
Urban adventure in the heart of the city.
🌲
Forest Cabin
Cozy cabin hidden in the peaceful woods.
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.card-img {
    aspect-ratio: 16 / 9; /* Forces 16:9 ratio */
    overflow: hidden;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image fills area without distortion */
}
2. Different Aspect Ratios
Square (1:1), Standard (4:3), Wide (21:9), and Cinema (16:9).
⬜
Square 1:1
Perfect for profile pictures and Instagram posts.
📷
Standard 4:3
Traditional photo and video ratio.
🎬
Ultrawide 21:9
Cinematic and dramatic presentations.
/* Different aspect ratio classes */
.aspect-1-1 .card-img { aspect-ratio: 1 / 1; }
.aspect-4-3 .card-img { aspect-ratio: 4 / 3; }
.aspect-21-9 .card-img { aspect-ratio: 21 / 9; }
3. Product Card Gallery
E-commerce style product cards with add-to-cart buttons.
📱
Smartphone Pro
$699
💻
Laptop Air
$999
🎧
Wireless Earbuds
$149
⌚
Smart Watch
$249
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.product-img {
    aspect-ratio: 1 / 1; /* Square product images */
}
4. Portfolio Gallery (Hover Overlay)
Portfolio items with image zoom and text overlay on hover.
🎨
Brand Identity
Graphic Design
💻
Web Development
Coding
📱
Mobile App
UI/UX Design
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.portfolio-img {
    aspect-ratio: 4 / 3;
    transition: transform 0.4s ease;
}

.portfolio-item:hover .portfolio-img {
    transform: scale(1.1); /* Zoom effect */
}
📚 Aspect Ratio & Object Fit Reference
/* =================================== ASPECT RATIO (maintains proportions) =================================== */ aspect-ratio: 16 / 9; /* Wide landscape */ aspect-ratio: 4 / 3; /* Standard photo */ aspect-ratio: 1 / 1; /* Perfect square */ aspect-ratio: 3 / 4; /* Portrait */ aspect-ratio: 21 / 9; /* Cinematic ultrawide */ /* =================================== OBJECT-FIT (how image fills container) =================================== */ object-fit: cover; /* Fills area, may crop */ object-fit: contain; /* Whole image visible, may have gaps */ object-fit: fill; /* Stretches (avoid) */ object-fit: none; /* Original size, may overflow */ /* =================================== PERFECT IMAGE CARD COMBINATION =================================== */ .image-container { aspect-ratio: 16 / 9; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .image-container:hover img { transform: scale(1.05); /* Zoom on hover */ }
🧠 Quick Quiz
/* Question 1: What does aspect-ratio: 16/9 do? */ /* Answer: Forces the container to be 16 units wide for every 9 units tall */ /* Question 2: What does object-fit: cover do? */ /* Answer: Image fills the container, cropping if necessary to maintain proportions */ /* Question 3: Why use overflow: hidden on the image container? */ /* Answer: To hide cropped parts when image zooms on hover */ /* Question 4: What's the difference between object-fit: cover and object-fit: contain? */ /* Answer: Cover fills area (may crop), Contain shows whole image (may have gaps) */