How To Scale And Crop Images With CSS Object-fit | DigitalOcean

Trang chủ » Html Image Stretch » How To Scale And Crop Images With CSS Object-fit | DigitalOcean

Có thể bạn quan tâm

Real-World UI Component Examples

Card Layout with Uniform Image Sizes

E-commerce and content cards often require images of different aspect ratios to fit identical containers:

<div class="card-grid"> <div class="card"> <img src="product-1.jpg" alt="Product 1" class="card-image"> <h3>Product Title</h3> <p>Description text</p> </div> <div class="card"> <img src="product-2.jpg" alt="Product 2" class="card-image"> <h3>Product Title</h3> <p>Description text</p> </div> </div> .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; } .card-image { width: 100%; height: 200px; object-fit: cover; object-position: center; border-radius: 8px 8px 0 0; }

This ensures all product images fill their 200px-tall containers uniformly, cropping as needed while maintaining aspect ratios.

Responsive Hero Image

Hero sections need images that fill the viewport width while maintaining a consistent height:

<header class="hero"> <img src="hero-image.jpg" alt="Hero banner" class="hero-image"> <div class="hero-content"> <h1>Welcome to Our Site</h1> <p>Compelling headline text</p> </div> </header> .hero { position: relative; width: 100%; height: 60vh; overflow: hidden; } .hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 1; }

The image covers the entire hero container at any viewport size, with content overlaid on top.

Avatar Grid with Circular Cropping

User avatars in social feeds or team pages benefit from object-fit combined with border-radius:

<div class="avatar-grid"> <img src="user1.jpg" alt="User 1" class="avatar"> <img src="user2.jpg" alt="User 2" class="avatar"> <img src="user3.jpg" alt="User 3" class="avatar"> </div> .avatar-grid { display: flex; gap: 1rem; } .avatar { width: 60px; height: 60px; object-fit: cover; object-position: center top; /* Focus on faces */ border-radius: 50%; border: 2px solid #fff; }

Circular avatars maintain consistent sizing regardless of source image dimensions, with faces positioned in the visible area.

Image galleries often contain photos with varying aspect ratios that need to display uniformly:

<div class="gallery"> <img src="photo1.jpg" alt="Photo 1" class="gallery-item"> <img src="photo2.jpg" alt="Photo 2" class="gallery-item"> <img src="photo3.jpg" alt="Photo 3" class="gallery-item"> </div> .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .gallery-item { width: 100%; height: 250px; object-fit: cover; object-position: center; border-radius: 4px; cursor: pointer; transition: transform 0.2s; } .gallery-item:hover { transform: scale(1.05); }

All gallery images fill their grid cells uniformly, creating a cohesive visual layout.

Từ khóa » Html Image Stretch