Resimleri CSS Objesi İçine Ölçekleme ve Kırpma
Resimlerle çalışırken orijinal en boy oranını korumak isteyeceğiniz bir senaryo ile karşılaşmanız olasıdır.
Giriş
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 makalede, fill
, cover
, contain
, none
, ve scale-down
mevcut değerlerinin object-fit
CSS etkilerini inceleyeceğiz, bu özellik görüntüleri kırpmak ve ölçeklemek olabilir. Ayrıca object-position
CSS özelliğini ve görüntüleri nasıl dengeleyebileceğini keşfedeceksiniz .
Önkoşullar
Bu makaleyi takip etmek isterseniz, şunlara ihtiyacınız olacak:
- CSS özelliğini ve değerlerini anlama .
- Özellik ile satır içi CSS bildirimlerini
style
kullanma . - Bir kod editörü.
- Destekleyen modern bir web tarayıcısı
object-fit
veobject-position
.
Ö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:
Bu görüntünün orijinal genişliği 1200 piksel ve yüksekliği 674 pikseldir. Kullanma img
özelliklere, genişlik olarak ayarlandı 600
ve 337
- yarı orijinal boyutlarını - boy oranını muhafaza etmektedir.
Şimdi, düzenin görüntülerin 300 piksel genişliğinde ve 337 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
kullanımı
fill
Değeri için başlangıç değeridir object-fit
. Bu değer, orijinal en boy oranını korumaz.
Bu kod tarayıcıda aşağıdaki sonucu üretecektir:
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ı
cover
Değeri orijinal boy oranını muhafaza eder, ancak görüntü tüm alanını kaplar.
Bu kod tarayıcıda aşağıdaki sonucu üretecektir:
Bazı 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
Değeri orijinal boy oranını muhafaza eder fakat kullanılabilir alan sınırları aşmayacak şekilde görüntü kısıtlıdır.
Bu kod tarayıcıda aşağıdaki sonucu üretecektir:
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 hiç görüntü boyutunu değiştirmez.
Bu kod tarayıcıda aşağıdaki sonucu üretecektir:
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: scale-down
kullanımı
scale-down
Gibi değeri, bir görüntü ekranı contain
ya da none
bağlı olarak hangi daha küçük bir görüntü olmasına neden olur.
Bu kod tarayıcıda aşağıdaki sonucu üretecektir:
Bu örnek görüntüde, görüntü şöyle davranacak şekilde küçültüldü contain
.
object-fit
ve object-position
kullanımı
Ortaya çıkan görüntü object-fit
kırpılmış görünüyorsa, varsayılan olarak görüntü ortalanmış olarak görünecektir. object-position
Mülkiyet odak noktasını değiştirmek için kullanılabilir.
Daha önceki object-fit: cover
örneği düşünün :
Şimdi görüntünün en sağ kenarını ortaya çıkarmak için görüntünün görünür kısmının X eksenindeki konumunu değiştirelim:
Bu kod tarayıcıda aşağıdaki sonucu üretecektir:
Bu örnek görüntüde, kaplumbağa görüntüden kırpılmıştır.
Ve son olarak, pozisyon mevcut uzayın sınırları dışında belirtilirse ne olduğunu gözlemleyelim:
Bu kod tarayıcıda aşağıdaki sonucu üretecektir:
Bu örnek görüntüde, kaplumbağa ve timsah kafaları görüntüden kırpılmıştır. Ayrıca resmin solunda ofsetin %20'sini oluşturacak boşluk vardır.
Sonuç
Bu makalede, object-fit
ve object-position
CSS özellikleri için kullanılabilen değerleri araştırdınız.
object-fit
ayrıca inherit, initial ve unset öğelerini de destekler .
object-fit
Projenizde kullanmadan önce , Can I Use?'daki tarayıcı desteğini kontrol ederek hedef kitleniz tarafından kullanılan tarayıcılarda desteklendiğini doğrulayın. .
CSS hakkında daha fazla bilgi edinmek isterseniz, alıştırmalar ve programlama projeleri için CSS konu sayfamıza göz atın.
Kaynak