Existuje mnoho metod, jak umístit obrázek do CSS, například pomocí objekt-pozice majetku, pomocí plovák vlastnost (pro zarovnání prvků doleva nebo doprava).

Pomocí vlastnosti object-position

The objekt-pozice vlastnost v CSS určuje zarovnání obsahu v kontejneru. Používá se s objekt-fit vlastnost, která definuje, jak prvek jako nebo je umístěn se souřadnicemi x/y v poli obsahu.

Při použití objekt-fit vlastnost, výchozí hodnota pro objekt-pozice je 50 % 50 % , takže ve výchozím nastavení jsou všechny obrázky umístěny ve středu pole obsahu. Výchozí zarovnání můžeme změnit pomocí objekt-pozice vlastnictví.

Syntax

 object-position: | initial | inherit; 

The pozice hodnota objekt-pozice vlastnost definuje pozici videa nebo obrázku uvnitř kontejneru. Přijímá dvě číselné hodnoty, kde první hodnota řídí osu x a druhá hodnota řídí osu y. Řetězec můžeme použít např levá, pravá nebo centrum atd. pro umístění obrázku v kontejneru. Umožňuje záporné hodnoty.

jak velká je obrazovka mého monitoru

Jasněji to pochopíme na několika příkladech.

Příklad

V tomto příkladu používáme řetězcové hodnoty jako např 'vpravo nahoře', 'uprostřed nahoře', a 'vlevo nahoře' pro umístění obrázku.

 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ýstup

Nyní je zde další příklad použití objekt-pozice vlastnictví.

Příklad

V tomto příkladu používáme počáteční hodnota, která umístila obrázek do středu. Je to proto, že iniciála nastaví vlastnost na výchozí hodnotu, která je 50 % 50 % . Používáme také číselné hodnoty 200 pixelů a 100 pixelů .

 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ýstup

Pomocí vlastnosti float

Vlastnost CSS float je vlastnost umístění, která se používá k posunutí prvku doleva nebo doprava, což umožňuje ostatním prvkům jej obtékat. Obecně se používá s obrázky a rozvrženími.

Prvky jsou plovoucí pouze vodorovně. Je tedy možné plout prvky pouze doleva nebo doprava, nikoli nahoru nebo dolů. Plovoucí prvek lze posunout co nejvíce doleva nebo doprava. Jednoduše to znamená, že plovoucí prvek se může zobrazit zcela vlevo nebo zcela vpravo.

Vezměme si příklad použití plovák vlastnictví.

jak aplikovat falešnou abstraktní třídu

Příklad

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

Výstup