object-fit ve object-position özelliklerinin kullanımını içeren bir konu olan object-view-box
object-view-box özelliği, CSS object-fit ve object-position özelliklerinin birleşimi olarak düşünülebilir. Bu özellik, bir görselin veya video gibi medya öğesinin içerisinde görüntülenen alanı belirlemek için kullanılır.
Özellikle, bir img etiketi içindeki bir görselin boyutu, div’in genişliği ve yüksekliği kadar olmayabilir. Bu durumda, object-fit özelliği kullanılarak, görselin boyutu div’in boyutuna uyacak şekilde ölçeklendirilebilir. object-position özelliği ise, görselin etiket içinde nereye yerleştirileceğini belirler.
object-view-box özelliği, object-fit ve object-position özelliklerini kullanarak, resmin görüntülenen alanını daha spesifik bir şekilde belirleyebilir. Mesela, bir görselin yalnızca belirli bir bölümünün görüntülenmesini istiyorsanız, object-view-box özelliği kullanılabilir.
object-view-box özelliği, x, y, width ve height özellikler ile tanımlanır. Div’in içinde görüntülenen bölgenin sol üst köşesinin konumunu ve genişliğini ve yüksekliğini belirtir. Örneğin, aşağıdaki kod bloğunda, img öğesi içindeki resmin yalnızca sağ alt çeyreği görüntüleniyor:
img {
object-fit: cover;
object-position: bottom right;
object-view-box: 50% 50% 50% 50%;
}Burada object-fit ve object-position özellikleri, resmin boyutunu ve konumunu belirlerken, object-view-box özelliği, resmin yalnızca sağ alt çeyreğini görüntülemek için 50% 50% 50% 50% kullanılır.
object-view-box özelliği, medya öğelerinin yanı sıra SVG öğelerinde de kullanılabilir. SVG öğelerinde, viewBox özelliği benzer şekilde çalışır.
object-view-box özelliği, medya öğelerinin içinde görüntülenen bölgeyi daha spesifik bir şekilde belirlemek için kullanılır. object-fit ve object-position özellikleri ile birlikte kullanıldığında, bir resmin boyutu, konumu ve görüntülenen bölgesi tam olarak kontrol edilebilir.