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:

Ö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:

<img
 src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
 width="600"
 height="337"
 style="width: 600px; height: 337px;"
 alt="Sample image of a turtle riding on top of an alligator that is swimming in the water - scaled to 600 x 337."
/>
   
 

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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ı 600ve 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:

<img
 src="https://assets.digitalocean.com/articles/alligator/css/object-fit/example-object-fit.jpg"
 width="600"
 height="337"
 style="width: 300px; height: 337px;"
 alt="Sample image of a tutle riding on top of an alligator that is swimming in the water - scaled to 300 x 337."
/>
   

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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ı

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

<img
 ...
 style="width: 300px; height: 337px; object-fit: fill;"
 ...
/>
   
 

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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ı

coverDeğeri orijinal boy oranını muhafaza eder, ancak görüntü tüm alanını kaplar.

<img
 ...
 style="width: 300px; height: 337px; object-fit: cover;"
 ...
/>
   

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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ı

containDeğ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.

<img
 ...
 style="width: 300px; height: 337px; object-fit: contain;"
 ...
/>
   

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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.

<img
 ...
 style="width: 300px; height: 337px; object-fit: none;"
 ...
/>
   

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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.

<img
 ...
 style="width: 300px; height: 337px; object-fit: scale-down;"
 ...
/>
   

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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 :

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

Ş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:

 

<img
 ...
 style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;"
 ...
/>
   

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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:

 
<img
 ...
 style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;"
 ...
/>
 
 
 

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

Resimleri CSS Objesi İçine Ölçekleme ve Kırpma

 

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

Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...