Vývojáři nastavili polohu obrázku, aby vytvořili jasnou vizuální hierarchii určením pořadí a rozměrů obrázku vzhledem k ostatním prvkům HTML. Umístěním obrázku do různých pozic lze také generovat moderní, jedinečné a vlastní návrhy, které mohou změnit vzhled a dojem z webu. Tento článek ukazuje postup pro nastavení pozice obrázku pomocí CSS.
Jak nastavit pozici obrázku v CSS?
Nastavením pozice obrázku v CSS získáte výhody jako „ přesné umístění “, “ překrývající se prvek ' a ' responzivní design “ lze snadno dosáhnout. Pomocí těchto výhod mohou vývojáři snadno přizpůsobit a vytvořit plně funkční a poutavý web. Existují dva způsoby/vlastnosti, kterými lze nastavit polohu obrázku. Tyto vlastnosti jsou popsány níže:
Metoda 1: Použití vlastnosti Float
' plovák vlastnost je poskytována CSS pro pohyb prvků HTML v ' vlevo, odjet “ nebo „ že jo “směr. Nejčastěji se používá při vytváření responzivního rozvržení pro přesné umístění prvků HTML.
Například vlastnost „float“ se používá k zarovnání obrázků na levé i pravé straně webové stránky:
< div >
< img src = 'bg.jpg' výška = '300px' šířka = '400px' třída = 'positionRight' >
< img src = 'kniha.jpg' výška = '300px' šířka = '400px' třída = 'positionLeft' >
div >
Ve výše uvedeném kódu:
-
- Za prvé, kořen ' div ” je vytvořen prvek, který funguje jako kontejner pro HTML prvky.
- Dále dva“
“ tagy se používají uvnitř “
” tag.- Poté hodnoty „ 300 pixelů ' a ' 400 pixelů “ jsou poskytovány „ výška ' a ' šířka “ atributy obou “
” tagy.
- Také přiřaďte třídu „ polohaVpravo ' a ' positionLeft ” na první a druhý tag „
“.
Nyní zadejte „
< styl >” pro použití následujících vlastností CSS:
.poziceVpravo {
plovák: pravý;
}
.positionLeft {
plavat vlevo;
}
styl >
Popis je uveden níže:
-
- Nejprve vyberte „ polohaVpravo třídy a nastavte hodnotu „ že jo “na jeho” plovák ' vlastnictví. To přesune vybraný prvek HTML na webové stránce správným směrem.
- Dále vyberte „ positionLeft „třída a uveďte hodnotu „ vlevo, odjet “ na “ plovák ' vlastnictví. Tím se prvek posune směrem k levé straně.
Po skončení fáze kompilace:
Výstup ukazuje, že obrázky byly nastaveny na levou a pravou pozici.Metoda 2: Použití vlastnosti pozice objektu
' objekt-pozice Vlastnost ” zajišťuje umístění obrázku nebo HTML prvku na konkrétní pozici na webové stránce. Poskytuje kontrolu nad horizontálním a vertikálním umístěním, což umožňuje uživateli dosáhnout požadovaného vizuálního efektu nebo rozložení. Nejčastěji jej používají vývojáři pro ořezávání obrázků, vytváření miniatur, vlastní rozvržení atd.
Tato vlastnost může nabývat číselných hodnot i hodnot klíčových slov. Například jsou k dispozici číselné hodnoty i hodnoty klíčových slov pro „ objekt-pozice ' vlastnictví. Nastavuje pozici obrázku v CSS v níže uvedeném úryvku kódu:
< styl >
.numericalValues
{
object-position: 100px 20px;
}
.keywordValues
{
pozice objektu: vlevo;
}
styl >
< tělo >
< div >
< img src = 'kniha.jpg' výška = '300px' šířka = '400px' třída = 'keywordValues' >
< img src = 'bg.jpg' výška = '300px' šířka = '400px' třída = 'numericalValues' >
div >
tělo >
Ve výše uvedeném úryvku kódu:-
- Za prvé, „ numericalValues “ třída je vybrána uvnitř “
” tag. A číselné hodnoty „ 100px 20px “ jsou poskytovány CSS “ objekt-pozice ' vlastnictví. ' 100 pixelů “ je prostor přidaný v horizontálním směru a „ 20 pixelů “ pro vertikální. - Dále, „ keywordValues “ je vybrána třída a hodnota klíčového slova „ vlevo, odjet “ se poskytuje „ objekt-pozice ” pro zarovnání obrázku směrem doleva.
- Poté uvnitř „ ” vytvoří se dva obrázky a k nim jsou přiřazeny výše vytvořené třídy.
- Za prvé, „ numericalValues “ třída je vybrána uvnitř “
Po skončení fáze kompilace vypadá webová stránka takto:
Snímek ukazuje, že obrázky jsou nyní nastaveny do určitých pozic.Závěr
Pozici obrázku lze nastavit pomocí CSS “ plovák ' a ' objekt-pozice vlastnosti. ' plovák Vlastnost ” vezme klíčové slovo jako hodnotu a přesune prvek doleva nebo doprava. Na druhou stranu, „ objekt-pozice “, přebírá klíčové slovo i číselné hodnoty v horizontálním i vertikálním směru. Tento článek demonstroval postup pro nastavení pozice obrázku v CSS.
- Poté hodnoty „ 300 pixelů ' a ' 400 pixelů “ jsou poskytovány „ výška ' a ' šířka “ atributy obou “