CSS object-position Özelliği
- Önceki Sayfa CSS object-fit
- Sonraki Sayfa CSS Maskeler
CSS object-position öznitelikleri, <img> veya <video> unsurlarının konteynerindeki konumunu belirlemek için kullanılır.
resim
Shanghai'dan gelen ve 600x400 piksel boyutunda olan aşağıdaki resmi görün:
Sonra, kullanıyoruz object-fit: cover; genişlik ve yükseklik oranını korumak ve belirtilen boyutları doldurmak için kullanacağız. Ancak, resim şu şekilde kesilecektir:
Örnek
img {
width: 266px;
height: 400px;
object-fit: cover;
}
object-position özniteliklerini
Görüntülenen resim parçası istediğimiz konumda değilse. Resmi konumlandırmak için object-position öznitelik.
Burada, kullanacağımız object-position özniteliklerini kullanarak resmi merkeze konumlandıracağız: eski yapı
Örnek
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 50% 100%;
}
Burada, kullanacağımız object-position Özellikleri kullanarak görseli konumlandırarak ünlü Pekin Sarayı'nın sol köşesini sağa taşıyın:
Örnek
img {
width: 266px;
height: 400px;
object-fit: cover;
object-position: 25% 100%;
}
CSS object-* Özellikleri
Aşağıdaki tablo, CSS object-* özelliklerini listeler:
| Özellik | Açıklama |
|---|---|
| object-fit | Bu, <img> veya <video> etiketlerinin konteynerine nasıl uyacak şekilde büyütülüp küçültülmesini belirler. |
| object-position | Bu, <img> veya <video> etiketlerinin 'kendine ait içerik çubuğu' içinde x/y koordinatları üzerinden nasıl konumlandırılacağını belirler. |
- Önceki Sayfa CSS object-fit
- Sonraki Sayfa CSS Maskeler
