Der er mange metoder til at placere billedet i CSS, såsom at bruge objekt-position ejendom, ved hjælp af flyde egenskab (til at justere elementerne til venstre eller højre).
Ved at bruge egenskaben objekt-position
Det objekt-position egenskab i CSS angiver justeringen af indholdet i containeren. Den bruges sammen med objekttilpasning egenskab til at definere, hvordan et element som eller er placeret med x/y-koordinater i sin indholdsboks.
Ved brug af objekttilpasning egenskab, standardværdien for objekt-position er 50 % 50 % , så som standard er alle billeder placeret i midten af deres indholdsboks. Vi kan ændre standardjusteringen ved at bruge objekt-position ejendom.
Syntaks
object-position: | initial | inherit;
Det position værdien af objekt-position egenskab definerer videoens eller billedets position inde i beholderen. Den accepterer to numeriske værdier, hvor den første værdi styrer x-aksen, og den anden værdi styrer y-aksen. Vi kan bruge strengen som f.eks venstre højre , eller centrum osv. til placering af billedet i beholderen. Det tillader negative værdier.
Vi kan forstå det klarere ved at bruge nogle eksempler.
Eksempel
I dette eksempel bruger vi strengværdierne som f.eks 'højre top', 'center top', og 'venstre top' for at placere billedet.
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> Test det nu Produktion
Nu er der et andet eksempel på at bruge objekt-position ejendom.
Eksempel
I dette eksempel bruger vi initial værdi, som placerede billedet i centrum. Det er fordi initialen sætter egenskaben til dens standardværdi, som er 50 % 50 % . Vi bruger også de numeriske værdier 200 px og 100 px .
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> Test det nu Produktion
Ved at bruge float-egenskaben
CSS float-egenskaben er en positioneringsegenskab, der bruges til at skubbe et element til venstre eller højre, så andre elementer kan ombrydes. Generelt bruges det med billeder og layouts.
Elementer flyder kun vandret. Så det er kun muligt at flyde elementer til venstre eller højre, ikke op eller ned. Et flydende element kan flyttes så langt til venstre eller højre som muligt. Det betyder ganske enkelt, at et flydende element kan vises yderst til venstre eller yderst til højre.
Lad os tage et eksempel på at bruge flyde ejendom.
Eksempel
CSS float property #left { float: left; } #right { float: right; } Test det nu Produktion
