CSS object-view-box Özelliği ile Görüntüyü Kırpmak

CSS'te bir resmin istediğimiz bir bölümünü kırpmamız için doğal bir yöntem yoktu. Ya resmi saran farklı bir elemente ihtiyacımız vardı (<figure> gibi) yada background-image kodu ile resmin pozisyonunu ve boyutunu ayarlamak gerekiyordu.

İki yöntemide nasıl kullanacağımıza bakalım.

Resmi Farklı Bir Element ile Sarmak

Bu yöntemde üç adımda istediğimiz sonuca ulaşabiliyoruz.

• <img /> etiketimizi bir kapsayıcı element ile sarmak (<figure> kullanacağız.)
• Figure'e position: relative ve overflow: hidden kodlarını ekleyeceğiz.
• Son olarakta resme position: absolute ekleyip pozisyonuyla oynayacağız.

<figure>
    <img src="/img/omergulcicek.png" alt="" />
</figure>

figure {
    aspect-ratio: 1;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    width: 350px;
}

img {
    bottom: 0;
    height: 100%;
    left: -20%;
    object-fit: cover;
    position: absolute;
    right: 0;
    top: 0;
    width: 160%;
}

Resme Background Vermek

Bu yöntemde <img /> etiketi yerine farklı bir etiket kullanıp arkaplanına görsel ekleyeceğiz.

<div class="omer"></div>

.omer {
    aspect-ratio: 3 / 2;
    background-image: url("/img/omer.jpg");
    background-position: 14% 53%;
    background-repeat: no-repeat;
    background-size: 350px auto;
    width: 150px;
}

Yukarıdaki iki yöntem eskiden kullanmak zorunda olduğumuz seçeneklerdi. Fakat artık CSS direkt olarak bunu sağlayabiliyor.

---

Object-View-Box Özelliğinin Tanıtımı

object-view-box özelliği henüz çok yeni; Chrome Canary'de mevcut fakat Google Chrome'a 104. versiyondan itibaren geleceği söyleniyor.

Bu özellik görselin üzerinde dikdörtgen çizip o alanı göstermeyi sağlıyor. 4 taraftan (üst, sağ, alt, sol) ne kadarlık bir alanı göstermek istediğimizi belirteceğiz.

<img src="/img/omergulcicek.png" alt="" />

img {
    aspect-ratio: 1;
    object-fit: cover;
    object-view-box: inset(25% 20% 15% 0%);
    width: 300px;
}

Buradaki inset() kodunun mantığı şu; üstten 25%, sağdan 20%, alttan 15%'lik alanı alma, kalan kısmı ekranda göster.

Kaynak

• Ahmad Shadeed - First Look At The CSS object-view-box Property