CSS Nesne konumu Özelliği
CSS object-positionözelliği, bir <img> veya <video> öğesinin kapsayıcı içinde nasıl konumlandırılacağını belirtmek için kullanılır.
Görüntü
400x300 piksel olan aşağıdaki Paris resmine bakın:
Ardından, object-fit: cover;en boy oranını korumak ve verilen boyutu doldurmak için kullanıyoruz. Ancak, görüntü şu şekilde sığacak şekilde kırpılacaktır:
Örnek
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Nesne konumu Özelliğini kullanma
Diyelim ki görüntünün gösterilen kısmı istediğimiz gibi konumlandırılmadı. Görüntüyü konumlandırmak için object-positionözelliği kullanacağız.
Burada object-position, büyük eski bina merkezde olacak şekilde görüntüyü konumlandırmak için özelliği kullanacağız:
Örnek
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 80% 100%;
}
Burada object-position, ünlü Eyfel Kulesi merkezde olacak şekilde görüntüyü konumlandırmak için özelliği kullanacağız:
Örnek
img {
width: 200px;
height:
300px;
object-fit: cover;
object-position: 15% 100%;
}
CSS Nesnesi-* Özellikler
Aşağıdaki tablo, CSS nesnesi-* özelliklerini listeler:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-posititon | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |