Kodcular
Published in

Kodcular

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.

object-view-box

İ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.

object-view-box
object-view-box

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

--

--

“Kodcular, Türkiye’nin En Büyük Medium Yazılım Topluluğudur.” Bu yayın yazılım üzerine üretilen blogların bir araya geldiği bir Türkçe yayındır.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store