Nesne konumu - CSS Hileleri | CSS Almanak 2024

object-positionÖzelliği ile bağlantılı olarak kullanılır object-fit, örneğin, bir video veya resim olarak bir eleman içeriği-kutu içinde, X / Y koordinatları ile nasıl konumlandığı ve özelliği ve parametreler. Bu özellik, 0 10%veya gibi iki sayısal değer alır 0 10px. Bu örneklerde, ilk sayı görüntünün içerik kutusunun (0) soluna yerleştirilmesi gerektiğini, ikincisi ise üstten% 10 veya 10px konumlandırılması gerektiğini belirtir. Negatif değerler kullanmak da mümkündür.

İçin varsayılan değer object-positionolan 50% 50%kullanırken object-fitşöyle yüzden varsayılan olarak tüm görüntüleri içeriklerinin kutunun merkezinde konumlandırılmış olması, bir resmin üzerine özelliği:

img ( object-fit: none; object-position: 50% 50%; /* default value: image is centered*/ object-position: 0 0; /* positioned top left of the content box */ )

Demo

Aşağıda object-position, object-fitözellik ayarlı olarak bir görüntünün nasıl değiştirilebileceğine dair birkaç örnek bulunmaktadır none. Görüntünün içeriği herhangi bir nedenle içerik kutusunu doldurmazsa, doldurulmamış alan background-image, son örnekte olduğu gibi bir renk veya hatta bir renk olabilen öğenin arka planını gösterecektir :

CodePen'de Robin Rendle (@robinrendle) tarafından yazılan Kalem Nesne konumuna bakın.