CSS

CSS object-fit ile Resmi Sığdırma – Kırpma ve Ölçeklendirme

Görsellerle çalışırken orijinal en boy oranını korumak isteyeceğiniz bir senaryo ile karşılaşmanız olasıdır. En boy oranını korumak, görüntülerin uzatılarak veya ezilerek bozuk görünmesini önleyecektir. Bu sorun için yaygın bir çözüm, background-image CSS özelliğini kullanmaktır. Daha modern bir yaklaşım, object-fit CSS özelliğini kullanmak olacaktır.

Bu yazıda, object-fit CSS özelliği için kullanılabile fill, cover, contain, none, ve scale-down değerlerinin etkilerini ve görüntüleri nasıl kırpıp ölçekleyebileceğini keşfedeceksiniz. Ayrıca object-postion CSS özelliğini ve görüntüleri nasıl dengeleyebileceğini keşfedeceksiniz.

İlginizi çekebilir: CSS ile Resmi Yuvarlamak

Örnek Görüntünün Varsayılan Davranışını Gözlemleme

Örnek bir resmi görüntülemek için kullanılan aşağıdaki kodu göz önünde bulundurun:

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

img öznitelikleri kullanılarak genişlik, en boy oranı korunarak, orijinal boyutların yarısı olan 800 ve 350’ye ayarlanmıştır.

Şimdi, düzenin görüntülerin 300 piksel genişliğinde ve 250 piksel yüksekliğinde olmasını beklediği bir durumu düşünün:

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

Ortaya çıkan görüntü artık orijinal en boy oranını korumuyor ve görsel olarak “ezilmiş” görünüyor.

object-fit:fill Kullanma

fill değeri, object-fit için başlangıç değeridir. Bu değer, orijinal en boy oranını korumaz.

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

object-fit:fill Kullanma
object-fit:fill Kullanma

Bu, tarayıcı oluşturma motorları için “başlangıç” değeri olduğundan, ölçeklenen görüntüden görünümde herhangi bir değişiklik olmaz. Ortaya çıkan görüntü hala ezilmiş görünüyor.

object-fit:cover Kullanımı

Kapak değeri orijinal en boy oranını korur, ancak görüntü tüm kullanılabilir alanı kaplar.

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

object-fit:cover Kullanımı
object-fit:cover Kullanımı

Belirli durumlarda, object-fit:cover, görüntünün kırpılmış görünmesine neden olur. Bu örnek görüntüde, orijinal görüntünün sol ve sağdaki bazı kısımları, beyan edilen genişlik sınırlarına sığamadıkları için görünmüyor.

object-fit: contain Kullanımı

Contain, orijinal en boy oranını korur, ancak görüntü de kullanılabilir alanın sınırlarını aşmayacak şekilde sınırlandırılır.

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

object-fit: contain Kullanımı
object-fit: contain Kullanımı

Belirli durumlarda, object-fit: contain görüntünün mevcut tüm alanı doldurmamasına neden olur. Bu örnek görüntüde, beyan edilen yükseklik küçültülmüş yükseklikten daha uzun olduğu için görüntünün üstünde ve altında dikey boşluk vardır.

object-fit:none Kullanımı

None değeri görüntüyü hiç yeniden boyutlandırmaz.

Resmin kullanılabilir alandan daha büyük olduğu durumlarda kırpılmış olarak görünecektir. Bu örnek görüntüde, orijinal görüntünün sol, sağ, üst ve alt kısmındaki bazı bölümleri, beyan edilen genişlik ve yükseklik sınırlarına sığamadıkları için görünmez.

object-fit:none Kullanımı
object-fit:none Kullanımı

object-fit: scale-down Kullanımı

Scale-down değeri, daha küçük bir görüntüyle sonuçlanacak olana bağlı olarak contain veya none gibi bir görüntü görüntüler.

Bu örnek görüntüde, görüntü, içerme gibi davranacak şekilde küçültüldü.

object-fit: scale-down Kullanımı
object-fit: scale-down Kullanımı

object-fit ve object-position Kullanımı

Nesneye sığdırmadan elde edilen görüntü kırpılmış görünüyorsa, varsayılan olarak görüntü ortalanmış olarak görünecektir. object-position özelliği, odak noktasını değiştirmek için kullanılabilir.

Daha önce object-fit:slace-down örneğini düşünün:

object-fit ve object-position Kullanımı

Bu örnek görüntüde, resim yukarıdan aşağı doğru çizilmiştir.

Ve son olarak, pozisyon, mevcut alan sınırları dışında belirtilirse ne olduğunu gözlemleyelim:

Görüntü aşağıdaki gibi olacaktır.

Bu örnek görüntüde, mevcut alanın sağında görünecektir. Ayrıca resmin solunda ofsetin %20’sini oluşturacak boşluk vardır.

Not: object-position özelliği ile aşağıdaki değerleri de kullanabildiğinizi unutmayın.

Örnek:

Çıktısı şu şekilde olacaktır.

Yorum Yap

Yorum yapmak için tıklayın