Resimleri Bozmadan Kırpma: object-fit: cover; Kullanımı
object-fit: cover; CSS özelliği, özellikle <img> ve <video> gibi medya öğelerinde kullanılır ve içeriğin belirlenen genişlik ve yükseklik oranlarına uyum sağlamasını sağlar.
Ne İşe Yarar?
- Resmin veya videonun belirlenen bir konteynerin içine sığmasını ve kırpılmasını sağlar.
- Orantıyı bozmadan içeriğin tamamen görünmesini sağlar.
- İçeriği taşırmadan ve boşluk bırakmadan gösterir.
Nasıl Çalışır?
- Resim, orijinal en-boy oranını koruyarak belirtilen alanı doldurur.
- Eğer resmin oranı belirtilen konteynerle uyuşmazsa, taşan kısımlar kırpılır ama resim deforme olmaz.
- Resim kendi merkezine göre hizalanır, yani ortalanmış olur.
Kullanım Amaçları
- Responsive Tasarımlar
- Farklı ekran boyutlarında resimlerin bozulmadan ve kaymadan görünmesini sağlar.
- Slider veya Galeri Uygulamaları
- Tüm resimlerin aynı ölçülerde ve düzenli görünmesini sağlamak için kullanılır.
- Profil Resimleri & Avatarlar
- Kullanıcıların farklı boyuttaki resimlerini eşit ölçülerde göstermek için kullanılır.
- Tam Ekran Görseller
- Arka plan veya kapak görsellerinde boşluk bırakmadan tam ekran kaplama yapmak için kullanılır.
Örnek Kullanım
img {
width: 300px;
height: 200px;
object-fit: cover;
}
<img src="resim.jpg" alt="Örnek Resim">
Bu kod sayesinde, resim 300x200px ölçüsünde olacak ve deforme olmadan konteyneri dolduracak. Eğer resim orijinal olarak farklı bir oranda ise, kırpılacak ama oranı değişmeyecek.