Az
elem egy soros elem (a megjelenített értéke inline-block
). Könnyen központosítható a text-align: center;
CSS tulajdonság hozzáadásával az azt tartalmazó szülő elemhez.
A kép központosításához egy blokk szintű elem belsejét text-align: center;
kell elhelyeznie
, például a div
. Mivel a text-align
tulajdonság csak blokkszintű elemekre vonatkozik, text-align: center;
a burkoló blokkszintű elemre helyezve vízszintesen középre kerül
.
Példa
Center an Image using text align center .img-container { text-align: center; }
Megjegyzés: A szülőelemnek blokkelemnek kell lennie. Ha ez nem blokk elem, akkor hozzá kell adnia adisplay: block;
CSS tulajdonságot a tulajdonsággal együtttext-align
.
Center an Image using text align center .img-container { text-align: center; display: block; }
Bemutató: Codepen
Object Fit
Miután a kép középre került, érdemes átméretezni. A object-fit
tulajdonság megadja, hogy az elem hogyan reagál a szülődobozának szélességére / magasságára.
Ez a tulajdonság használható képekhez, videókhoz vagy bármely más adathordozóhoz. A object-position
tulajdonsággal együtt is használható, hogy jobban ellenőrizhesse a média megjelenítését.
Alapvetõen a object-fit
tulajdonságot használjuk annak meghatározására, hogy miként nyújtja vagy széthúzza az inline adathordozókat.
Szintaxis
.element
Értékek
fill
: Ez az alapértelmezett érték . Átméretezze a tartalmat úgy, hogy megfeleljen a szülődobozának, a képaránytól függetlenül.contain
: A megfelelő méretarány használatával méretezze át a tartalmat, hogy kitöltse a szülődobozát.cover
: hasonló,contain
de gyakran levágja a tartalmat.none
: a kép megjelenítése az eredeti méretben.scale-down
: hasonlítsa össze a különbségetnone
éscontain
találja meg a legkisebb konkrét tárgyméretet.
Böngésző kompatibilitás
Ezt object-fit
a legtöbb modern böngésző támogatja, a kompatibilitással kapcsolatos legfrissebb információkért nézze meg ezt a //caniuse.com/#search=object-fit oldalon.
Dokumentáció
- text-align - MDN
- object-fit - MDN
- MDN