CSS Duyarlı Görseller
Medya sorguları viewport değişince layout'u yeniledi. Görseller ayrı stres: 4000px dosya dar sütunda taşar, bant genişliği yer veya yüklenirken sayfa zıplar. Bu ders akışkan CSS, alan ayırma ve daha akıllı kaynaklar — önceki @media sözdizimini tekrarlamadan.
Duyarlı görsel araç seti
📊 Duyarlı görseller özeti
| Parça | Günlük iş |
|---|---|
max-width: 100% + height: auto |
Sütunda küçülür; oran korunur |
<img> width/height veya CSS aspect-ratio |
Layout alanı; daha az CLS |
srcset + sizes |
Tarayıcı render genişliğine yakın dosya seçer |
<picture> + <source media> |
Art direction — farklı kırpma/asset |
object-fit + sabit kutu |
Bilinen çerçevede kırpma (Object Fit dersi) |
| Layout medya sorguları | Sütun/nav — görsel slot genişliğini izler |
İki katman: layout genişliği ve görsel davranışı. Önce CSS ile taşmayı düzelt; mobilde küçük dosya gerekiyorsa srcset.
Akışkan görsel — max-width, height: auto
.article img {
max-width: 100%;
height: auto;
display: block;
}
Dev intrinsic görselde sadece width: 100% without max-width kaçının. srcset ile birleştirin.
Alan ayır — aspect-ratio
.hero__photo {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
Tam görünmesi gereken içerik fotoğrafında akışkan max-width. Sabit çerçeve tasarımında aspect-ratio + cover.
Çözünürlük — srcset, sizes
<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'teki gerçek render genişliğine uygun olsun.
Art direction — <picture>
<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 art direction için; elli breakpoint kopyası değil.
Sabit çerçeve — object-fit hatırlatma
.card__thumb {
width: 100%;
height: 12rem;
object-fit: cover;
display: block;
}
Sorgular sütunları değiştirir; görseller slot genişliğini alır. Breakpoint'te sizes güncelleyin.
Deneyin
- Geniş img —
max-width: 100%,height: auto. - Hero'da aspect-ratio.
- srcset + sizes.
- picture iki kırpma.
- Sabit thumb + cover.
Sık hatalar
- Dev src, srcset yok
- width 100% height auto yok
- yanlış sizes
- object-fit kutusuz
- burada @media tekrarı
Özet
- Akışkan CSS sütunda tutar
- aspect-ratio zıplamayı azaltır
- srcset/sizes dosya; picture art direction
- object-fit sabit çerçeveler
- Sırada: Breakpoints
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek