CSS Nesne Sığdırma
Float, metni medyanın yanında sardı. object-fit başka bir medya sorusuna cevap verir: bir img veya video sabit boyutlu bir çerçevede oturduğunda içerik o çerçeveyi nasıl doldurmalı? Yüzleri fill ile germeden önce cover ve contain’i ustalaşın.
Bir object-fit araç seti
📊 Object-fit bir bakışta
| Değer | Günlük iş |
|---|---|
fill |
Kutuya kadar ger — en-boy oranı bozulabilir |
contain |
Tüm medyayı içine sığdır; boş şeritler kalabilir |
cover |
Kutuyu doldur; kenarlar kırpılabilir |
none |
İçsel boyutu koru; taşma veya boşluk olabilir |
scale-down |
none veya contain gibi — hangisi daha küçükse |
object-position |
Kırpma/sığdırma sırasında hangi kısmın görünür kalacağını hedefler |
object-fit yalnızca replaced öğenin belirli bir genişlik ve yüksekliği olduğunda (veya her iki eksen kısıtlandığında) parlar. Auto yükseklikli serbest bir görselin «içine sığacağı» bir çerçeve yoktur.
Cover — çerçeveyi doldur, kırpmaya izin ver
Kartlar ve hero küçük resimleri çoğu zaman kutunun her pikselinin dolmasını ister. cover büyütür ve taşanı kırpar. Düzenli ızgaralar için kare kutuyu cover ile eşleştirin.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — tüm resmi göster
Ürün çekimleri ve diyagramlar çoğu zaman tamamen görünür kalmalıdır. Oranlar farklıysa contain boş şeritler (letterbox) bırakır — kesilmiş logodan şerit daha iyidir.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill gerer — dikkatli kullanın
fill, oranlar bozulsa bile medyayı kutu boyutuna zorlar. Soyut dokular için uygun; yüzler, logolar ve grafikler için riskli.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position kırpmayı hedefler
cover kırptığında varsayılan merkez bir yüzü veya logoyu gizleyebilir. object-position ile kaydırın — yüzdeler veya top ve left gibi anahtar kelimeler.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
Sakin bir object-fit alışkanlığı
Anlamlı medya için gerçek <img> / <video> ile object-fit kullanın. Görsel yalnızca dekoratif CSS chrome ise background-size kullanın. Önce kutuyu boyutlandırın, cover veya contain seçin, sonra konumu ince ayarlayın.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
Kendiniz deneyin
- Bir görsele sabit genişlik ve yükseklik verin, sonra
coverilecontain’i deneyin. coverile dairesel bir avatar yapın veobject-position’ı kaydırın.- Bir kez
filluygulayın ve bozulmayı fark edin — sonra geri dönün. - Aynı kırpmayı CSS
background-size: coverdekorasyonu olarak karşılaştırın. - Bir cümle yazın: contain ne zaman cover’dan daha güvenli?
Yaygın hatalar
- Boyutlu kutu olmadan
object-fitbeklemek - Portre ve logolarda
fillkullanmak - Bu dersi float sarma veya position ofsetleriyle karıştırmak
- Anlamlı fotoğrafları yalnızca
background-image’e koymak (alt zorlaşır) - Cover konuyu gizlediğinde
object-position’ı unutmak
Özet
object-fitreplaced medyayı boyutlu çerçeveye sığdırırcoverdoldurur ve kırpabilir;containhepsini gösterir ve şerit bırakabilirfillbozabilir — seyrek kullanınobject-positiongörünen bölgeyi hedefler- İçerik medyası için object-fit; dekor için background-size tercih edin
🧠 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