Vývojári nastavili polohu obrázka, aby vytvorili jasnú vizuálnu hierarchiu určením poradia a rozmerov obrázka vzhľadom na ostatné prvky HTML. Umiestnením obrázka do rôznych pozícií je možné generovať aj moderné, jedinečné a vlastné návrhy, ktoré môžu zmeniť vzhľad a dojem z webovej stránky. Tento článok demonštruje postup nastavenia pozície obrázka pomocou CSS.
Ako nastaviť pozíciu obrázka v CSS?
Nastavením pozície obrázka v CSS získate výhody ako „ presné umiestnenie “, “ prekrývajúci sa prvok “ a „ responzívny dizajn “ sa dá ľahko dosiahnuť. Pomocou týchto výhod môžu vývojári ľahko prispôsobiť a vytvoriť plne funkčnú a pútavú webovú stránku. Existujú dva spôsoby/vlastnosti, pomocou ktorých možno nastaviť polohu obrázka. Tieto vlastnosti sú opísané nižšie:
Metóda 1: Použitie Float Property
' plavák ” vlastnosť poskytuje CSS pre pohyb HTML elementov v “ vľavo “ alebo „ správny “smer. Väčšinou sa používa pri vytváraní responzívneho rozloženia na presné umiestnenie prvkov HTML.
Napríklad vlastnosť „float“ sa používa na zarovnanie obrázkov na ľavej aj pravej strane webovej stránky:
< div >
< img src = 'bg.jpg' výška = '300 pixelov' šírka = '400 pixelov' trieda = 'positionRight' >
< img src = 'kniha.jpg' výška = '300 pixelov' šírka = '400 pixelov' trieda = 'positionLeft' >
div >
Vo vyššie uvedenom kóde:
-
- Po prvé, koreň „ div ” je vytvorený prvok, ktorý funguje ako kontajner pre prvky HTML.
- Ďalej dve “
'značky sa používajú vo vnútri '
” tag.- Potom sa hodnoty „ 300 pixelov “ a „ 400 pixelov “ sú poskytované „ výška “ a „ šírka “ atribúty oboch “
'značky.'
- Tiež priraďte triedu „ positionRight “ a „ positionLeft ” na prvú a druhú značku „
“.
Teraz zadajte „
- Potom sa hodnoty „ 300 pixelov “ a „ 400 pixelov “ sú poskytované „ výška “ a „ šírka “ atribúty oboch “