تصاویر واکنش‌گرا

تکنیک‌های ساخت تصاویر واکنش‌گرا: max-width، object-fit، srcset و picture

تصاویر واکنش‌گرا

تصاویر باید با اندازه صفحه تطبیق پیدا کنند — نه سرریز کنند و نه بیش از حد بزرگ شوند.

قاعده طلایی

img {
        max-width: 100%;
        height: auto;
    }

object-fit

مقدارتوضیح
fillکشیده شدن
containنمایش کامل با حفظ نسبت
cover ⭐پر کردن کامل با برش
noneبدون تغییر
scale-downکوچک‌ترین حالت

استفاده از object-fit

.card-img {
        width: 100%;
        height: 250px;
        object-fit: cover;  /* برش هوشمند */
        border-radius: 12px;
    }

srcset برای تصاویر واکنسپانسیو

<img src="small.jpg"
         srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
         sizes="(max-width: 600px) 100vw, 50vw"
         alt="توضیح">

picture برای فرمت‌های مختلف

<picture>
        <source srcset="image.webp" type="image/webp">
        <source srcset="image.jpg" type="image/jpeg">
        <img src="image.jpg" alt="توضیح">
    </picture>

تصاویر پس‌زمینه واکنش‌گرا

.hero {
        background: url("hero.jpg") center/cover no-repeat;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط