Existuje mnoho spôsobov, ako umiestniť obrázok v CSS, napríklad pomocou objektová poloha majetok, pomocou plavák vlastnosť (na zarovnanie prvkov doľava alebo doprava).

Pomocou vlastnosti object-position

The objektová poloha vlastnosť v CSS určuje zarovnanie obsahu v kontajneri. Používa sa s objekt-fit vlastnosť na definovanie spôsobu, akým prvok ako alebo je umiestnený so súradnicami x/y v poli obsahu.

Pri použití objekt-fit vlastnosť, predvolená hodnota pre objektová poloha je 50 % 50 % , takže v predvolenom nastavení sú všetky obrázky umiestnené v strede ich obsahového poľa. Predvolené zarovnanie môžeme zmeniť pomocou objektová poloha nehnuteľnosť.

Syntax

 object-position: | initial | inherit; 

The pozíciu hodnotu objektová poloha vlastnosť definuje polohu videa alebo obrázka v kontajneri. Prijíma dve číselné hodnoty, pričom prvá hodnota riadi os x a druhá hodnota riadi os y. Šnúrku môžeme použiť napr vľavo vpravo , alebo stred atď. na umiestnenie obrázka v kontajneri. Umožňuje záporné hodnoty.

Jasnejšie to pochopíme na niekoľkých príkladoch.

Príklad

V tomto príklade používame reťazcové hodnoty ako napr „vpravo hore“, „v strede hore“, a 'vľavo hore' na umiestnenie obrazu.

 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> 

Výkon

Teraz je tu ďalší príklad použitia objektová poloha nehnuteľnosť.

Príklad

V tomto príklade používame počiatočné hodnota, ktorá umiestnila obrázok do stredu. Je to preto, že iniciál nastaví vlastnosť na jej predvolenú hodnotu, ktorá je 50 % 50 % . Používame aj číselné hodnoty 200 pixelov a 100 pixelov .

 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> 

Výkon

Pomocou vlastnosti float

Vlastnosť CSS float je vlastnosť polohovania, ktorá sa používa na posunutie prvku doľava alebo doprava, čo umožňuje iným prvkom, aby ho obklopili. Vo všeobecnosti sa používa s obrázkami a rozloženiami.

Prvky sa vznášajú iba vodorovne. Takže je možné plávať len prvky doľava alebo doprava, nie hore alebo dole. Plávajúci prvok môže byť posunutý čo najviac doľava alebo doprava. Jednoducho to znamená, že plávajúci prvok sa môže zobraziť úplne vľavo alebo úplne vpravo.

Zoberme si príklad použitia plavák nehnuteľnosť.

Príklad

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

Výkon