Sådan centreres et billede ved hjælp af tekstjustering: Center
Et
element er et indbygget element (visningsværdi på inline-block
). Det kan let centreres ved at tilføje text-align: center;
CSS-egenskaben til det overordnede element, der indeholder den.
For at centrere et billede ved hjælp af text-align: center;
skal du placere
indersiden af et element på blokniveau som f.eks div
. Da text-align
ejendommen kun gælder for blokniveauer, placerer du text-align: center;
på indpakningsblokkeniveauelementet for at opnå et vandret centreret
.
Eksempel
Center an Image using text align center .img-container { text-align: center; }
Bemærk: Det overordnede element skal være et blokelement. Hvis det ikke er et blokelement, skal du tilføjedisplay: block;
CSS-egenskab sammen medtext-align
ejendommen.
Center an Image using text align center .img-container { text-align: center; display: block; }
Demo: Codepen
Objektpasning
Når dit billede er centreret, vil du måske ændre størrelsen på det. De object-fit
egenskab angiver, hvordan et Element svarer på bredden / højden af det overordnede kassen.
Denne egenskab kan bruges til billede, video eller andre medier. Det kan også bruges sammen med object-position
ejendommen for at få mere kontrol over, hvordan mediet vises.
Grundlæggende bruger vi object-fit
egenskaben til at definere, hvordan den strækker eller klemmer et indbygget medie.
Syntaks
.element
Værdier
fill
: Dette er standardværdien . Ændr størrelsen på indholdet, så det matcher dets overordnede felt uanset størrelsesforholdet.contain
: Ændr størrelsen på indholdet for at udfylde det overordnede felt ved hjælp af det korrekte billedformat.cover
: lignercontain
men beskærer ofte indholdet.none
: viser billedet i dets originale størrelse.scale-down
: Sammenlign forskellen mellemnone
og forcontain
at finde den mindste størrelse af konkret genstand.
Browser Kompatibilitet
Det object-fit
understøttes af de fleste moderne browsere, for den mest opdaterede information om kompatibilitet kan du tjekke dette ud //caniuse.com/#search=object-fit.
Dokumentation
- tekstjustering - MDN
- objekt-fit - MDN
- MDN