Er zijn veel methoden om de afbeelding in CSS te positioneren, zoals het gebruik van de object-positie eigendom, met behulp van de vlot eigenschap (voor het uitlijnen van de elementen naar links of rechts).
Door de objectpositie-eigenschap te gebruiken
De object-positie eigenschap in CSS specificeert de uitlijning van de inhoud binnen de container. Het wordt gebruikt met de object-fit eigenschap om te definiëren hoe een element op of lijkt is gepositioneerd met x/y-coördinaten in het inhoudsvak.
miniwerkbalk Excel
Bij gebruik van de object-fit eigenschap, de standaardwaarde voor object-positie is 50% 50% , dus standaard worden alle afbeeldingen in het midden van hun inhoudsvak geplaatst. We kunnen de standaarduitlijning wijzigen met behulp van de object-positie eigendom.
Syntaxis
object-position: | initial | inherit;
De positie waarde van de object-positie eigenschap definieert de positie van video of afbeelding in de container. Het accepteert twee numerieke waarden, waarbij de eerste waarde de x-as bepaalt, en de tweede waarde de y-as. We kunnen de string gebruiken zoals links rechts , of centrum , etc. voor het positioneren van de afbeelding in de container. Het staat negatieve waarden toe.
We kunnen het duidelijker begrijpen door enkele voorbeelden te gebruiken.
Voorbeeld
In dit voorbeeld gebruiken we de tekenreekswaarden zoals 'rechtsboven', 'middenboven', En 'bovenaan links' om het beeld te positioneren.
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 het nu Uitvoer
Nu is er nog een voorbeeld van het gebruik van de object-positie eigendom.
Voorbeeld
In dit voorbeeld gebruiken we de voorletter waarde die het beeld in het midden positioneerde. Het is omdat de initiaal de eigenschap instelt op de standaardwaarde, namelijk 50% 50% . We gebruiken ook de numerieke waarden 200px En 100px .
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 het nu Uitvoer
Door gebruik te maken van de float-eigenschap
De CSS float-eigenschap is een positioneringseigenschap die wordt gebruikt om een element naar links of rechts te duwen, waardoor andere elementen eromheen kunnen lopen. Over het algemeen wordt het gebruikt met afbeeldingen en lay-outs.
Elementen worden alleen horizontaal zwevend weergegeven. Het is dus alleen mogelijk om elementen naar links of rechts te laten zweven, niet omhoog of omlaag. Een zwevend element mag zo ver mogelijk naar links of rechts worden verplaatst. Het betekent eenvoudigweg dat een zwevend element uiterst links of uiterst rechts kan worden weergegeven.
Laten we een voorbeeld nemen van het gebruik van de vlot eigendom.
Voorbeeld
CSS float property #left { float: left; } #right { float: right; } Test het nu Uitvoer
een miljoen in cijfers
