CSS Görsel Galerisi
Açılır menüler bağlantıların altına menü yuvalar. Görsel galerisi farklı bir bileşendir: insanların tarayabileceği sakin bir küçük resim ızgarası. Küçük resimleri aynı boyutta tutun, satırın kırılmasına izin verin, object-fit ile kırpın ve daha derin duyarlı ızgaraları sonraki Flexbox ve Grid modüllerine bırakın.
Galeri araç seti
📊 Görsel galerisine hızlı bakış
| Parça | Günlük işi |
|---|---|
| Galeri listesi | Küçük resimleri kırılan satıra veya ızgaraya dizen sarmalayıcı |
| Küçük resim boyutu | Setin eşit görünmesi için ortak genişlik/yükseklik |
object-fit: cover |
Çirkin esneme olmadan küçük resim kutusunu doldurur |
| Gap / margin | Görseller arasında nefes payı |
| Hover ipucu | Düzeni zıplatmadan yumuşak geri bildirim |
| Altyazı | Anlam için isteğe bağlı figure/figcaption |
Faydalı alt metni olan gerçek <img> öğeleri kullanın. Yalnızca süs spriteları başka yere aittir — galeriler genelde içeriktir.
Kırılan flex galeri
wrap’li bir flex kapsayıcı, küçük resim listesini bir sonraki satıra düşen duyarlı bir satıra çevirir. Gap aralığı dürüst tutar.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
Ortak küçük resim kutusu + cover
Her görsele aynı kutuyu verin, sonra cover ile kırpın ki dikey ve yatay fotoğraflar aynı ritmi paylaşsın.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figure ve altyazılar
Etiket önemliyse görseli figure içine alın ve figcaption ekleyin. Altyazı metnini küçük resmin altında kısa tutun.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
Yumuşak hover geri bildirimi
Üzerine gelince hafifçe soluklaştırın veya aydınlatın. Komşuları iten büyük scale dönüşümlerinden kaçının — yığınlamayı dikkatle planlamıyorsanız.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
Sakin bir galeri alışkanlığı
Eşit küçük resim kutuları, wrap + gap, object-fit: cover, anlamlı alt. Gelişmiş duyarlı düzen için sonraki Flex/Grid derslerini tercih edin — bunu açılır menülerle karıştırmayın.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
Kendiniz deneyin
- Bağlantılı görsellerden oluşan bir
.galleryflex wrap listesi kurun. - Ortak genişlik/yükseklik ve
object-fit: coverayarlayın. - Bir öğeye
figure/figcaptionekleyin. - Yumuşak bir hover opacity veya outline stilleyin.
- Bir cümle yazın: Grid bu wrap taslağından daha iyi ne öğretecek?
Yaygın hatalar
- Ortak kutu veya object-fit olmadan rastgele yükseklikleri karıştırmak
- Küçük resimlerin yapışması için sıfır gap
- Galerilere iç içe açılır menü gibi davranmak
- Her küçük resmi absolute ile kırılgan bir yığına koymak
- Anlamlı fotoğraflarda boş
alt
Özet
- Galeriler eşit küçük resimlerin kırılan kümeleridir
- Ortak boyut +
object-fit: coverritmi düzenli tutar - Flex wrap + gap sakin bir başlangıç düzenidir
- Altyazılar ve hover ipuçları isteğe bağlı ve hafif kalır
- Flexbox/Grid modülleri sonra duyarlı galerileri derinleştirir
🧠 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