تصاویر واکنش‌گرا در CSS
مدیا کوئری چیدمان را با عرض صفحه عوض کرد. تصویر جداگانه دردسر دارد: یک فایل چهار‌هزار پیکسلی داخل ستون باریک از کادر می‌زند بیرون، پهنای باند را می‌بلعد، یا تا لود شدن صفحه می‌پرد. این جلسه CSS سیال، جا نگه‌داشتن فضا و منبع هوشمندتر را می‌گذارد — بدون تکرار نحو @media از درس قبل.
جعبهٔ ابزار تصویر واکنش‌گرا
📊 تصویر واکنش‌گرا یک‌نگاه
| قطعه | کار روزمره |
|---|---|
max-width: 100% + height: auto |
تصویر داخل ستون کوچک می‌شود؛ نسبت ابعاد حفظ می‌شود |
width / height روی <img> یا aspect-ratio در CSS |
جای layout رزرو می‌شود؛ CLS موقع لود کمتر می‌شود |
srcset + sizes |
مرورگر فایلی نزدیک به عرض واقعی نمایش انتخاب می‌کند |
<picture> + <source media> |
جهت هنری — برش یا فایل متفاوت برای شرایط مختلف |
object-fit + جعبهٔ ثابت |
برش یا نوار داخل قاب مشخص (درس Object Fit) |
| مدیا کوئری روی layout | هنوز ستون و منو را جابه‌جا می‌کند — تصویر عرض همان slot را می‌گیرد |
دو لایه را جدا ببینید: عرض چیدمان (کانتینر، grid، مدیا کوئری) و رفتار تصویر (مقیاس CSS + کدام فایل دانلود شود). اول سرریز را با CSS درست کنید؛ وقتی همان ظاهر روی موبایل فایل کوچک‌تر می‌خواهد، srcset اضافه کنید.
تصویر سیال — max-width و height: auto
عادت کلاسیک: تصویر از کانتینر پهن‌تر نشود، ولی قدش را هم بی‌نسبت کش ندهید.
.article img {
max-width: 100%;
height: auto;
display: block;
}
فقط width: 100% روی فایل غول‌آسا بدون max-width گاهی هنوز مقیاس عجیب می‌دهد. قانون سیال را با منبع معقول یا srcset جفت کنید تا موبایل برای thumbnail، پوستر دسکتاپ نکشد.
رزرو فضا — ابعاد و aspect-ratio
وقتی مرورگر زود عرض و ارتفاع را بداند، محتوای پایین با رسیدن تصویر نمی‌پرد. در CSS مدرن می‌توانید نسبت را مستقیم بگویید.
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
برای عکس محتوایی که باید کامل دیده شود، max-width سیال بدون اجبار cover بهتر است. aspect-ratio + object-fit: cover وقتی طراحی قاب ثابت می‌خواهد (آواتار، بندانگشتی کارت) — درس Object Fit همان craft را باز می‌کند؛ اینجا نکتهٔ اصلی کم‌کردن پرش layout در حالی که صفحه واکنش‌گرا بماند.
تعویض رزولوشن — srcset و sizes
srcset نامزدها را فهرست می‌کند؛ sizes می‌گوید تصویر در layout چقدر عرض می‌گیرد (نه فقط viewport). مرورگر فایل را انتخاب می‌کند — لازم نیست برای هر عرض PNG یک بلوک @media بنویسید.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(min-width: 48rem) 640px, 100vw"
alt="Team at a whiteboard"
width="800"
height="450"
/>
sizes را راست بگویید: اگر CSS روی موبایل تمام viewport و روی دسکتاپ نصف کانتینر است، همین را بنویسید. hint غلط یعنی فایل خیلی سنگین یا خیلی تار.
جهت هنری با <picture>
وقتی برش باید عوض شود — hero عمودی روی گوشی، بنر عریض روی دسکتا — <source> با media (یا type برای فرمت) بگذارید و یک <img> fallback با alt نگه دارید.
<picture>
<source media="(max-width: 40rem)" srcset="hero-portrait.jpg" />
<source media="(min-width: 41rem)" srcset="hero-landscape.jpg" />
<img src="hero-landscape.jpg" alt="City skyline at dusk" width="1200" height="675" />
</picture>
picture را برای جهت هنری بردارید، نه برای پنجاه breakpoint تکراری. خیلی وقت‌ها فقط srcset کافی است وقتی رزولوشن عوض می‌شود نه برش. با CSS سیال بالا جفت کنید تا هر فایلی لود شد داخل ستون بماند.
قاب ثابت — یادآوری کوتاه object-fit
عکس سیال inline با max-width. کارت با کاشی هم‌قد هنوز جعبهٔ اندازه‌دار + object-fit: cover می‌خواهد — درس Object Fit مالک آن craft است؛ اینجا فقط مرز را ببینید که همهٔ گالری را با fill نکشید.
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}
هم‌راستا با مدیا کوئری، نه در مقابل آن
کوئری هنوز ستون grid و سایدبار را عوض می‌کند؛ تصویر عرض همان slot را می‌گیرد. وقتی breakpoint عرض render تصویر را عوض کرد، sizes را به‌روز کنید. جایگزین مدیا کوئری نیستید — hint تصویر را با layoutی که کوئری ساخته هماهنگ می‌کنید.
خودتان امتحان کنید
- یک
<img>پهن در ستون باریک بگذارید؛ باmax-width: 100%وheight: autoسرریز را ببندید. - روی یک hero مقدار
width،heightیاaspect-ratioبگذارید و دوباره لود کنید — پرش layout را ببینید کم می‌شود. - یک
srcsetبا سه عرض و یک رشتهٔsizesواقع‌بینانه برای layout تمرینی بنویسید. - یک
<picture>با دو برش برای viewport باریک و عریض بسازید. - در grid کارت، بندانگشتی با ارتفاع ثابت و
object-fit: coverبگذارید و با گام ۱ فرقش را ببینید.
اشتباه‌های رایج
- فقط
srcغول‌آسا — بدونsrcset— موبایل پوستر دسکتاپ می‌کشد width: 100%بدونheight: auto(یا برعکس) و عکس دفرمهsizes="100vw"همه‌جا در حالی که CSS واقعاً تصویر ۳۲۰px می‌دهدobject-fitروی تصویری بدون قاب محدود — چیزی برای fit نیست- دوباره آموزش نحو
@mediaاینجا به‌جای وصل کردن کوئری به عرض slot وsizes
جمع‌بندی
- CSS سیال (
max-width: 100%،height: auto) تصویر را داخل ستون‌های واکنش‌گرا نگه می‌دارد - با ابعاد یا
aspect-ratioجا رزرو کنید تا layout کمتر بپرد srcset/sizesکدام فایل لود شود را بهینه می‌کند؛<picture>برای جهت هنری استobject-fitبرای قاب ثابت است، نه پیش‌فرض هر عکس inline- بعد: Breakpoints — نام‌گذاری و برنامهٔ استراتژی کوئری در کل صفحه
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود