Deweloperzy ustawiają pozycję obrazu, aby ustanowić wyraźną hierarchię wizualną, określając kolejność i wymiary obrazu względem innych elementów HTML. Umieszczając obraz w różnych pozycjach, można również generować nowoczesne, unikalne i niestandardowe projekty, które mogą zmienić wygląd i styl witryny. W tym artykule pokazano procedurę ustawiania pozycji obrazu za pomocą CSS.
Jak ustawić pozycję obrazu w CSS?
Dzięki ustawieniu pozycji obrazu w CSS korzyści takie jak „ precyzyjne umiejscowienie ”, „ nakładający się element ' I ' elastyczny projekt ” można łatwo osiągnąć. Korzystając z tych korzyści, programiści mogą łatwo dostosować i zbudować w pełni funkcjonalną i przyciągającą wzrok stronę internetową. Istnieją dwie metody/właściwości, za pomocą których można ustawić pozycję obrazu. Właściwości te opisano poniżej:
Metoda 1: Korzystanie z właściwości Float
„ platforma ” jest udostępniana przez CSS do przenoszenia elementów HTML w „ lewy ' Lub ' Prawidłowy ' kierunek. Wykorzystywany jest głównie przy tworzeniu responsywnego layoutu w celu precyzyjnego rozmieszczenia elementów HTML.
Na przykład właściwość „float” służy do wyrównywania obrazów zarówno po lewej, jak i po prawej stronie strony internetowej:
< dz >
< img źródło = 'bg.jpg' wysokość = „300 pikseli” szerokość = „400 pikseli” klasa = „pozycja w prawo” >
< img źródło = 'książka.jpg' wysokość = „300 pikseli” szerokość = „400 pikseli” klasa = „pozycjaLewo” >
dz >
W powyższym kodzie:
-
- Najpierw korzeń „ dz ” tworzony jest element, który działa jako kontener dla elementów HTML.
- Dalej dwa”
” tagi są używane wewnątrz „ ”znacznik. - Następnie wartości „ 300 pikseli ' I ' 400 pikseli ” są dostarczane do „ wysokość ' I ' szerokość ” atrybuty obu “
” tagi. - Przypisz także klasę „ pozycjaPrawo ' I ' pozycjaLewo ” odpowiednio do pierwszego i drugiego znacznika „
”.
Teraz wpisz „
.pozycjaPrawo {
pływak: prawy;
}
.pozycjaLewo {
pływak: lewy;
}
styl >
Opis znajduje się poniżej:
-
- Najpierw wybierz „ pozycjaPrawo ” class i ustaw wartość „ Prawidłowy ' do tego ' platforma ' nieruchomość. Spowoduje to przeniesienie wybranego elementu HTML we właściwym kierunku na stronie internetowej.
- Następnie wybierz „ pozycjaLewo ” klasa i podaj wartość „ lewy ' do ' platforma ' nieruchomość. Spowoduje to przesunięcie elementu w lewą stronę.
Po zakończeniu fazy kompilacji:
Dane wyjściowe pokazują, że obrazy zostały ustawione w lewej i prawej pozycji.
Metoda 2: Korzystanie z właściwości pozycji obiektu
„ pozycja obiektu ” zapewnia umieszczenie obrazu lub elementu HTML w określonym miejscu na stronie internetowej. Daje kontrolę nad pozycją poziomą i pionową, pozwalając użytkownikowi na uzyskanie pożądanego efektu wizualnego lub układu. Jest najczęściej używany przez programistów do przycinania obrazów, tworzenia miniatur, niestandardowych układów itp.
Ta właściwość może przyjmować zarówno wartości liczbowe, jak i słowa kluczowe. Na przykład dla „ pozycja obiektu ' nieruchomość. Ustawia pozycję obrazu w CSS w poniższym fragmencie kodu:
< styl >.wartości numeryczne
{
pozycja obiektu: 100px 20px;
}
.wartości słów kluczowych
{
pozycja obiektu: lewa;
}
styl >
< ciało >
< dz >
< img źródło = 'książka.jpg' wysokość = „300 pikseli” szerokość = „400 pikseli” klasa = „wartości słów kluczowych” >
< img źródło = 'bg.jpg' wysokość = „300 pikseli” szerokość = „400 pikseli” klasa = „wartości liczbowe” >
dz >
ciało >
W powyższym fragmencie kodu:
-
- Po pierwsze ' wartości liczbowe ” klasa jest wybierana wewnątrz „
”znacznik. A wartości liczbowe „ 100px 20px ” są dostarczane do usługi CSS „ pozycja obiektu ' nieruchomość. „ 100 pikseli ” to przestrzeń dodana w kierunku poziomym, a „ 20px ” dla pionu. - Następnie „ słowa kluczoweWartości ” wybrano klasę i wartość słowa kluczowego „ lewy ” udziela się „ pozycja obiektu ”, aby wyrównać obraz w kierunku lewej strony.
- Następnie wewnątrz „
” tagiem tworzone są dwa obrazy i przypisywane są do nich utworzone powyżej klasy.
- Po pierwsze ' wartości liczbowe ” klasa jest wybierana wewnątrz „
Po zakończeniu fazy kompilacji strona wygląda następująco:
Migawka pokazuje, że obrazy są teraz ustawione w określonych pozycjach.
Wniosek
Położenie obrazu można ustawić za pomocą CSS „ platforma ' I ' pozycja obiektu ' nieruchomości. „ platforma ” przyjmuje słowo kluczowe jako wartość i przesuwa element w lewą lub prawą pozycję. Z drugiej strony „ pozycja obiektu ”, przyjmuje zarówno wartości słowa kluczowego, jak i wartości liczbowe w kierunku poziomym i pionowym. W tym artykule zademonstrowano procedurę ustawiania pozycji obrazu w CSS.