Görüntüyü CSS'de konumlandırmanın birçok yöntemi vardır; nesne konumu özelliğini kullanarak batmadan yüzmek özellik (öğeleri sola veya sağa hizalamak için).
Nesne konumu özelliğini kullanarak
nesne konumu CSS'deki özellik, kapsayıcı içindeki içeriğin hizalamasını belirtir. İle kullanılır nesneye uygun bir öğenin nasıl veya nasıl olduğunu tanımlamak için özellik içerik kutusunda x/y koordinatlarıyla konumlandırılır.
Kullanırken nesneye uygun özellik, varsayılan değer nesne konumu dır-dir %50 %50 , dolayısıyla varsayılan olarak tüm görseller içerik kutularının ortasına konumlandırılır. Kullanarak varsayılan hizalamayı değiştirebiliriz. nesne konumu mülk.
Sözdizimi
object-position: | initial | inherit;
konum değeri nesne konumu özelliği, videonun veya görüntünün kapsayıcı içindeki konumunu tanımlar. İlk değerin x eksenini, ikinci değerin ise y eksenini kontrol ettiği iki sayısal değeri kabul eder. Gibi bir dize kullanabiliriz sol sağ , veya merkez görüntüyü kapta konumlandırmak için vb. Negatif değerlere izin verir.
Bazı örneklerle bunu daha net anlayabiliriz.
Örnek
Bu örnekte aşağıdaki gibi dize değerlerini kullanıyoruz: 'sağ üst', 'orta üst', Ve 'sol üst' görüntüyü konumlandırmak için.
CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> Şimdi Test Edin Çıktı
Şimdi, kullanmanın başka bir örneği daha var. nesne konumu mülk.
Örnek
Bu örnekte, şunu kullanıyoruz: ilk görüntüyü merkeze konumlandıran değer. Bunun nedeni, başlangıç özelliğinin özelliği varsayılan değerine ayarlamasıdır; %50 %50 . Ayrıca sayısal değerleri de kullanıyoruz. 200 piksel Ve 100 piksel .
CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> Şimdi Test Edin Çıktı
Float özelliğini kullanarak
CSS float özelliği, bir öğeyi sola veya sağa iterek diğer öğelerin onun etrafına sarılmasına olanak tanıyan bir konumlandırma özelliğidir. Genellikle görseller ve düzenlerle kullanılır.
Elemanlar yalnızca yatay olarak yüzdürülür. Yani elemanları yukarı veya aşağı değil, yalnızca sola veya sağa kaydırmak mümkündür. Yüzen bir eleman mümkün olduğu kadar sola veya sağa hareket ettirilebilir. Basitçe, kayan bir öğenin en solda veya en sağda görüntülenebileceği anlamına gelir.
Kullanımına bir örnek verelim batmadan yüzmek mülk.
Örnek
CSS float property #left { float: left; } #right { float: right; } Şimdi Test Edin Çıktı
