CSS ile Resim Kullanım Çeşitleri

Html'de kullanılan img etiketlerinin gösteriminde css ile 2 çeşit listeleme formatı vardır. Bu çeşitlerin ad'ları cover ve contain özelliğidir. Bu özellikler img etiketinde object-fit stili ile, background-image larda ise background-size stili ile kullanılmaktadır.

Cover Özelliği

Cover özelliği resmin genişlik ve yükselik değerinden en küçük olan değere göre kapsayıcı elementin(div,picture) içerisinde tamamen kapsamaya yarayan bir özelliktir. Resim öğenin tüm içerik kutusunu doldururken en boy oranını koruyacak şekilde boyutlandırılır. Nesnenin en boy oranı, kutusunun en boy oranına uymuyorsa, nesne sığması için kırpılacaktır.

Örnek: 

cover

cover

Contain Özelliği

Contain özelliği ise resmin genişlik ve yükselik değerinden en büyük olan değere göre kapsayıcı elementin(div,picture) içerisinde oto sığdırarak ortalı şekilde gösteren özelliktir. Resmi herhangi bir yerini kesmeden tamamını gösterir, nesnenin en boy oranı, kutusunun en boy oranına uyuyorsa, nesne alanın içerisine sığar ama kenar boşlukları (sağ,sol,üst,alt) ortaya çıkar.

contain

contain