CSS Dersleri 44 - object-fit Kullanımı

CSS Dersleri 44 - object-fit Kullanımı


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de object-fit Kullanımı Konusunu öğreneceğiz.

CSS object-fit özelliği, bir görsel veya video etiketlerinin kabına sığdırmak için nasıl yeniden boyutlandırılması gerektiğini belirtmek için kullanılır.

Bu özellik, görsel veya video'ya bulundujları kapsayıcıyı çeşitli şekillerde doldurmasını söyler; bunlar "en boy oranını koru" veya "gerin ve mümkün olduğunca fazla yer kaplayın" gibi durumlar belirtilir.

Bir resmimizin olduğunu varsayalım bu resim 400 piksel genişliğinde ve 300 piksel yüksekliğindedir. Bununla birlikte, ilgili resmin genişliğinin (200 piksel) ve aynı yüksekliğin (300 piksel) yarısı olacak şekilde biçimlendirirsek, resim sünmüş şekilde gözükecektir.

Resim 200x300 piksellik kapsayıcıya sığacak şekilde zorlandığını görürüz ve orijinal en boy oranı bozulur.

İşte burada object-fit özelliği devreye girer. object-fit özelliği aşağıdaki değerlerden birini alabilir:

  • fill - Bu varsayılandır. Resim, verilen boyutu dolduracak şekilde yeniden boyutlandırılır. Gerekirse, görüntü sığacak şekilde uzatılacak veya sıkıştırılacaktır.
  • contain - Görüntü en boy oranını korur, ancak verilen boyuta sığması için yeniden boyutlandırılır
  • cover - Görüntü en boy oranını korur ve verilen boyutu doldurur. Görüntü sığacak şekilde kırpılır
  • none - Resim yeniden boyutlandırılmaz
  • scale-down - Resim none özelliğinin en düşük sürümüne küçültülür veya contain kullanılır.
<!DOCTYPE html>
<html>
<head>
<style>
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
</style>
</head>
<body>

<h1>object-fit</h1>

<h2>object-fit: Kullanılmamış hali</h2>
<img src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: fill (Varsayılan):</h2>
<img class="fill" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: contain:</h2>
<img class="contain" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: cover:</h2>
<img class="cover" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: scale-down:</h2>
<img class="scale-down" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

<h2>object-fit: none:</h2>
<img class="none" src="paris.jpg" alt="Paris" style="width:200px;height:300px">

</body>
</html>

CSS object-position Kullanımı

Diyelim ki görüntünün gösterilen kısmı istediğimiz gibi konumlandırılmadı. Görüntüyü konumlandırmak için object-position özelliğini kullanacağız.

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 300px;
  object-fit: cover;
  object-position: 80% 100%;
}
</style>
</head>
<body>

<h2>object-position</h2>


<img src="paris.jpg" alt="Paris" width="400" height="300">

</body>
</html>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla