CSS nesne konumu Özellik
Örnek
Bir görseli içerik kutusuna sığacak şekilde yeniden boyutlandırın ve görseli içerik kutusunun içinde soldan 5 piksel ve üstten %10 olarak konumlandırın:
img.a {
width: 200px;
height:
400px;
object-fit: none;
object-position: 5px 10%;
border: 5px solid red;
}
Tanım ve Kullanım
Bu object-position
özellik, bir <img> veya <video>'nun "kendi içerik kutusu" içinde x/y koordinatlarıyla nasıl konumlandırılacağını belirtmek için object-fit ile birlikte kullanılır.
Varsayılan değer: | %50 %50 |
---|---|
Miras: | Evet |
canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.objectPosition="0 %10" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Property | |||||
---|---|---|---|---|---|
object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
CSS Sözdizimi
object-position: position|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
position | Specifies the position of the image or video inside its content box. First value controls the x-axis and the second value controls the y-axis. Can be a string (left, center or right), or a number (in px or %). Negative values are allowed |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
İlgili Sayfalar
CSS eğitimi: CSS nesne uyumu
CSS referansı: CSS nesne uyumu
HTML DOM başvurusu: objectPosition özelliği