Istnieje wiele metod pozycjonowania obrazu w CSS, takich jak użycie pozycja obiektu własność, korzystając z platforma właściwość (do wyrównywania elementów w lewo lub w prawo).

Korzystając z właściwości położenia obiektu

The pozycja obiektu Właściwość w CSS określa wyrównanie zawartości w kontenerze. Używa się go z dopasowanie obiektowe właściwość określająca sposób działania elementu takiego jak or jest umieszczony we współrzędnych x/y w polu zawartości.

Podczas korzystania z dopasowanie obiektowe właściwość, wartość domyślna dla pozycja obiektu Jest 50% 50% , dlatego domyślnie wszystkie obrazy są umieszczane na środku pola zawartości. Możemy zmienić domyślne wyrównanie za pomocą pozycja obiektu nieruchomość.

Składnia

 object-position: | initial | inherit; 

The pozycja wartość pozycja obiektu Właściwość określa położenie wideo lub obrazu wewnątrz kontenera. Akceptuje dwie wartości liczbowe, przy czym pierwsza wartość steruje osią x, a druga wartość steruje osią y. Możemy użyć ciągu znaków np Lewo prawo , Lub Centrum itp. do pozycjonowania obrazu w kontenerze. Dopuszcza wartości ujemne.

Możemy to lepiej zrozumieć, posługując się przykładami.

Przykład

W tym przykładzie używamy wartości łańcuchowych, takich jak „prawy górny”, „środkowy górny”, I 'lewy górny' aby ustawić obraz.

 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> 

Wyjście

Teraz mamy inny przykład użycia metody pozycja obiektu nieruchomość.

Przykład

W tym przykładzie używamy wstępny wartość, która umieściła obraz na środku. Dzieje się tak dlatego, że wartość inicjalna ustawia właściwość na jej wartość domyślną, czyli 50% 50% . Posługujemy się także wartościami liczbowymi 200 pikseli I 100 pikseli .

 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> 

Wyjście

Korzystając z właściwości float

Właściwość CSS float to właściwość pozycjonowania używana do przesuwania elementu w lewo lub w prawo, umożliwiając owijanie się wokół niego innym elementom. Zwykle jest używany z obrazami i układami.

Elementy unoszą się wyłącznie poziomo. Zatem możliwe jest jedynie przesuwanie elementów w lewo lub w prawo, a nie w górę lub w dół. Element pływający można przesunąć maksymalnie w lewo lub w prawo. Oznacza to po prostu, że element pływający może być wyświetlany skrajnie po lewej stronie lub skrajnie po prawej stronie.

Weźmy przykład użycia platforma nieruchomość.

Przykład

 CSS float property #left { float: left; } #right { float: right; } 

Wyjście