Det finns många metoder för att placera bilden i CSS, som att använda objekt-position egendom, med hjälp av flyta egenskap (för att justera elementen till vänster eller höger).

hur man konverterar sträng till heltal

Genom att använda egenskapen object-position

De objekt-position egenskap i CSS anger justeringen av innehållet i behållaren. Den används med objektpassning egenskap för att definiera hur ett element som eller är placerad med x/y-koordinater i innehållsrutan.

När du använder objektpassning egenskap, standardvärdet för objekt-position är 50 % 50 % , så som standard är alla bilder placerade i mitten av innehållsrutan. Vi kan ändra standardinställningen genom att använda objekt-position fast egendom.

Syntax

 object-position: | initial | inherit; 

De placera värdet av objekt-position egenskapen definierar videons eller bildens position inuti behållaren. Den accepterar två numeriska värden, där det första värdet styr x-axeln och det andra värdet styr y-axeln. Vi kan använda strängen som t.ex vänster höger , eller Centrum , etc. för att placera bilden i behållaren. Det tillåter negativa värden.

Vi kan förstå det tydligare genom att använda några exempel.

Exempel

I det här exemplet använder vi strängvärden som t.ex 'höger upp', 'center topp', och 'vänster topp' för att placera bilden.

 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> 

Produktion

Nu finns det ett annat exempel på att använda objekt-position fast egendom.

Exempel

I det här exemplet använder vi första värde som placerade bilden i centrum. Det beror på att initialen ställer in egenskapen till dess standardvärde som är 50 % 50 % . Vi använder också numeriska värden 200 pixlar och 100 pixlar .

 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> 

Produktion

Genom att använda flytegenskapen

CSS float-egenskapen är en positioneringsegenskap som används för att skjuta ett element till vänster eller höger, så att andra element kan svepa runt det. I allmänhet används det med bilder och layouter.

instansiering i java

Element flyter endast horisontellt. Så det är bara möjligt att flyta element åt vänster eller höger, inte upp eller ner. Ett flytande element kan flyttas så långt åt vänster eller höger som möjligt. Det betyder helt enkelt att ett flytande element kan visas längst till vänster eller längst till höger.

Låt oss ta ett exempel på hur du använder flyta fast egendom.

Exempel

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

Produktion