CSS Resmi Div İçine Sığdırma

Css’te div içine bir resmi orjinal boyutu ile sığdırmak istiyorsak background-size özelliğini kullanmamız gerekmektedir. Bu özelliği daha iyi anlamak için aşağıdaki örneği inceleyelim;

#resim {

width: 400px;
height: 400px;
background-image: url(‘resim.jpg’);
-moz-background-size: 100% 100%; /* Firefox 3.6 */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0, Chrome */
background-size: 100% 100%; /* w3c, Firefox 4.0, ie9 */
}

Örneğimizde genişliği ve yüksekliği 400px olan div içine bir resim ekledik. Bu resmi div içine sığdırmak için background-size özelliğini 100% 100% olarak verdik. Bu yükseklik ve genişik olarak sığdır anlamına gelmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir