Blog ve Web Sitesi Resimlerindeki Nesne Uyumu Sorununun Giderilmesi

Blog ve Web Sitesi Resimlerindeki Nesne Uyumu Sorununun Giderilmesi - Nesne uyumu "object-fit", bir öğenin içerik kutusunun yüksekliğine nasıl tepki verdiğini tanımlar. Nesne konumu "object-position" özelliği ile birlikte görüntülenmesi için, videolar ve diğer medya formatları için tasarlanmıştır.

Nesne Uyumu - object-fit

Sadece object-fit kullanıldığı zaman, nesne kutusu içerisinde hassas kontrol sağlayan satır içi bir görüntüyü kesmemizi sağlar.

Nesene uyumu "object-fit" 5 (beş) farklı değer kullanarak ayarlanabilir.

1- fill: Bu, nesnenin en-boy oranına bakmaksızın görüntüyü içerik kutusuna uyacak şekilde ayarlanan varsayılan değerdir.

2- contain: En-boy oranında bir değişiklik olmadan, nesne görünümünü kutu içerisine doldurmak için görüntünün boyutunu artırır veya azaltır.

3- cover: Görüntünün, en-boy oranını koruyarak işlem sırasında görseli kırparak kutunun yüksekliğine ve genişliğine uyum sağlayacak şekilde dolduracaktır.

4- none: Resim yüksekliğini ve genişliğini yoksayar ve orijinal boyutunu korur.

5- scale-down: Resimlerin, none ve contain iki görüntü arasındaki en nesne boyutunu bulmak için kullanılır.

Nesne uyumu object-fit CSS kullanımı:

img {
    height: 120px;
    width: 260px;
    object-fit: fill;
}

img {
    height: 120px;
    width: 260px;
    object-fit: contain;
}

img {
    height: 120px;
    width: 260px;
    object-fit: none;
}

img {
    height: 120px;
    width: 260px;
    object-fit: cover;
}

img {
    height: 120px;
    width: 260px;
    object-fit: scale-down;
}

Aşağıdaki iki resim arasında soldaki orjinal resimden farklı en-boy oranına sahip olan sağdaki resim, resim kutusunun üst ve alt bölümünden kırpılarak içerik kutusu alanının dışına çıkacaktır. Varsayılan olarak, resim içerik kutusunun içinde ortalanmıştır. Bu durum object-position ile değiştirilebilir.

Aşağıdaki resimde bir görüntünün orijinal genişliğinden daha küçük veya daha büyük bir içerik kutusuna istediğimizi uygunlukta yerleştirilmesini gösteren beş örnek göstermekte.

Ön İzleme

Tarayıcınızda, nesne boyutlarını istediğiniz gibi görüntülenmesi için nesnelerinizi yeniden boyutlandırın.

Görüntü içeriği herhangi bir sebepten dolayı içerik kutusunu doldurmazsa, doldurulmamış olan alan öğelerin arka planı örnekte olduğu gibi gri renkte bir arka plan görünecektir.

Nesne Pozisyonu - object-position

Nesne uyumu object-fit özelliği ile birlikte kullanılan nesne pozisyonu object-position özelliği, bir video veya resmin içerik kutusunun içerisine konumlandırılmış bir elementin X/Y koordinatlarını tanımlar. Bu özelliğin kullanımında iki sayısal değer 0 10% , 0 10px kullanılır. Bu sayısal değerlerden ilki içerik kutusunun üst, ikincisi sağ kısmına 10% veya 10px olarak yerleştirilmesini sağlar. Bu değerleri hem pozitif hem de negatif değer olarak kullanılabilir.

Bir resim üzerinde object-position için var sayılan değer 50% 50% kullanılırken, object-fit varsayılan olarak tüm resimlerin içerik kutusunun ortasında konumlandırılır.

img {
    object-fit: none;
    object-position: 50% 50%;
    object-position: 0 0;
}

Aşağıdaki resimde object-position ve object-fit özelliklerinin nasıl kullanıldığını gösteren bir kaç örnek bulunmakta. Görüntü içeriği bazı sebeplerden dolayı içerik kutusunu tam olarak doldurmamışsa, doldurulmamış alan nesnenin arka planını gösterir. Bu, son örnekte olduğu gibi bir resim veya bir sayı olabilir.

Ön İzleme

Bu yazımızda blog veya web sitelerinde bulunan resimlerin veya nesnelerin kullanılan içerik kutusunda görünümünü düzenleyerek tarayıcıda görüntülenmesini istediğimiz şekilde ayarlanmasını sağlayan CSS kodları hakkında bilgiler paylaştık. Bu yazımız ile ilgili görüş ve sorularınız için yorum bırakabilirsiniz.