CSS3 background-size özelliği ile resim boyutlandırma nasıl yapılır?

Question

CSS3 background-size özelliğini kullanarak yüksek çözünürlükteki resimleri genişliği ve yüksekliği belirli bir div içine resmi küçülterek ve kırpmadan nasıl yerleştirebilirim?

ergin · Accepted Answer

CSS3 ile gelen background-size özelliği background olarak tanımlanan resmin boyutlarını tanımlamamıza yaramaktadır.

Genel Kullanımı;

background-size: 100% 100%;

background-size iki değer tanımlandığında ilk değer genişlik için ikinci değer yükseklik için uygulanır, tek değer atanmış ise hem genişlik hemde yükseklik için bu değer geçerli olur.

Yüzde değerler tanımlandığında kapsayıcı elemana göre konumlanır, Örneğin genişlik ve yükseklik tanımı olarak 100% tanımlandığında arka plan resmi kapsayıcı elemanın zeminini dolduracak şekilde yayılır. Resmi gerçek boyutlarında kullanmak için auto değeri atayarak kullanabilirsiniz.

Standart değerlerden başka iki farklı değer daha alır. Bu değerler cover ve container değerleridir. Her ikiside tarayıcı boyutuna göre orantılı olarak arka plan resmini boyutlandırır.

cover: Resmin genişlik veya yükseklik değerinden en küçük olanına göre kapsayıcı elemanın arka planını tamamen kaplar. Arka plan resmi tüm kapsayıcı elemanın zeminini kaplayacak şekilde ayarlanır ve resmin kalan kısmı kesik görünür.

contain: Arka plan resminin genişlik veya yüksekliğinden en büyük olanına göre Arkaplan alanın içine uydurur. Resmi herhangi bir yerini kesmeden tamamını gösterir, ancak bazı bölgeler arka plan resmi olmadan görünür.

gif, jpeg ve png gibi resim formatları yeniden boyutlandırıldığında resim kalitesinde görünümünde sıkıntılar çıkabilmektedir. Vektörel resimler (svg) desteği ile daha güzel görüntüler elde edebilirsiniz. background-size:0 değeri resmin görünmemesini sağlar.

CSS3 diğer özelliklerinde olduğu gibi background-size özelliğini destekleyen farklı tarayıcılar kendi ön ekleri ile kullanılmaktadır. ie8 ve ie7 için filter ile çözüm üreterek sorun kalmayacaktır.

Tüm tarayıcılar tarafından desteklenecek şekilde kullanımı aşağıdaki gibidir.

.uzmanim {
    height:100px;
    width:150px;
    background:url('ornek.jpg') no-repeat;
    -moz-background-size: 100% 100%;      /* Firefox 3.6 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0, Chrome */
    background-size: 100% 100%;      /* w3c, Firefox 4.0, ie9  */
    -o-background-size: 100% 100%;   /* Opera 9.5 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ornek.jpg',sizingMethod='scale'); /* ie8  */
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='ornek.jpg', sizingMethod='scale')"; 
}

Orjinal boyutları 220x139 olan resim CSS3 background-size özelliğini kullanarak yazdığımız kodlar sonucunda resim genişliği 150px yüksekliği 100px olan div içinde bu şekilde gözükecetir.

yakupcevik · Answer

Teşekkürler çok işime yaradı.