Egy kép vízszintes kiterjesztése hasznos technika lehet a webdesignban, különösen akkor, ha teljes szélességű bannert vagy fejlécet szeretnénk létrehozni. Szerencsére a CSS többféle módon is lehetővé teszi egy kép vízszintes nyújtását anélkül, hogy torzítaná azt. Ebben a bemutatóban megvizsgálunk néhányat a leggyakoribb módszerek közül, valamint azok előnyeit és hátrányait.
A kép vízszintes nyújtásának legegyszerűbb módja, ha a szélességét 100%-ra állítjuk. Ez a módszer jól működik reszponzív tervezéseknél, ahol a képnek a képernyő szélességéhez kell igazodnia. Ennek a módszernek a megvalósításához a következő CSS-kódot használhatja:
„„
img {
width: 100%;
} }
„`
Ez a kód automatikusan beállítja a weboldalon lévő összes kép szélességét a konténerük 100%-ára, ami azt jelenti, hogy a rendelkezésre álló helynek megfelelően bővülnek vagy zsugorodnak.
Az object-fit tulajdonság a CSS egy viszonylag új kiegészítője, amely lehetővé teszi annak meghatározását, hogy egy kép hogyan illeszkedjen a tárolójába. Alapértelmezés szerint a képek arányosan méreteződnek, hogy torzítás nélkül illeszkedjenek a tárolójukhoz. Ha azonban egy képet vízszintesen szeretne nyújtani, akkor az object-fit tulajdonságot fill értékkel használhatja:
„„
img {
width: 100%;
height: auto;
object-fit: fill;
}
„„
Ez a kód úgy nyújtja a képet, hogy vízszintesen kitöltse a tárolóját, de a kép tetejét és alját is levághatja, ha a kép oldalaránya nem egyezik a tárolóéval.
Egy másik módja a kép vízszintes nyújtásának, ha egy HTML-elem, például egy div vagy egy szakasz háttérképeként használjuk. Ezzel a módszerrel jobban szabályozhatja a kép pozícióját, méretét és ismétlődését. Ennek a módszernek a megvalósításához a következő CSS-kódot használhatja:
„„
.banner {
background-image: url(‘image.jpg’);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
} }
„`
Ebben a példában a háttérképet úgy állítjuk be, hogy a konténer teljes szélességét és magasságát lefedi, vízszintesen és függőlegesen középre állítva, ismétlés nélkül.
Végül a transform tulajdonság segítségével vízszintesen megnyújthatunk egy képet anélkül, hogy a képarányát befolyásolnánk. Ez a módszer akkor is jól működik, ha más transzformációkat, például elforgatást vagy ferdeséget szeretne alkalmazni. Egy kép vízszintes nyújtásához használhatja a scaleX() függvényt:
„„
img {
transform: scaleX(2);
} }
„`
Ez a kód megduplázza a kép szélességét, miközben a magassága érintetlen marad. A scaleX() értékét beállíthatja a kívánt nyújtási arány eléréséhez.
Összefoglalva, egy kép vízszintes nyújtása egyszerű vagy összetett feladat lehet a tervezési követelményektől függően. A fent vázolt módszerekkel különféle hatásokat érhet el anélkül, hogy a kép torzulna vagy romlana a minősége. Kísérletezzen ezekkel a technikákkal, hogy megtalálja a projektje számára legmegfelelőbbet.
CSS-ben a képet a background-image tulajdonság segítségével bővítheti ki. Az alábbi lépéseket kell követni:
1. Hozzon létre egy CSS-osztályt ahhoz az elemhez, amelyen ki szeretné bővíteni a képet, például:
„`
.my-element {
background-image: url(‘image.jpg’);
} }
„`
2. Állítsa be az elem szélességét és magasságát azokra a méretekre, amelyekre a képet ki szeretné terjeszteni:
„„
.my-element {
background-image: url(‘image.jpg’);
width: 500px;
height: 300px;
} }
„`
3. Ha azt szeretnénk, hogy a kép az egész elemet befedje, használjuk a background-size tulajdonságot, és állítsuk „cover”-re:
„„
.my-element {
background-image: url(‘image.jpg’);
width: 500px;
height: 300px;
background-size: cover;
} }
„`
4. Ha azt szeretnénk, hogy a kép ismétlődjön, hogy kitöltse az egész elemet, használjuk a background-repeat tulajdonságot, és állítsuk „repeat”-re:
„„
.my-element {
background-image: url(‘image.jpg’);
width: 500px;
height: 300px;
background-repeat: repeat;
} }
„`
5. A képet az elemen belül is elhelyezhetjük a background-position tulajdonság segítségével:
„„
.my-element {
background-image: url(‘image.jpg’);
width: 500px;
height: 300px;
background-position: center center;
} }
„`
Az alábbi lépéseket követve egy képet CSS-ben többféleképpen is kibővíthetünk a tervezési igényeinknek megfelelően.
Egy div vízszintes nyújtásához olyan CSS-tulajdonságokat használhat, mint a width, max-width vagy min-width.
1. `width` tulajdonság: Ez a tulajdonság a div elem szélességét állítja be. Beállíthat egy fix értéket pixelben vagy százalékban. Ha például a div-t a szülő konténer 50%-ára szeretné nyújtani, akkor a következő kódot használhatja:
„„
div {
width: 50%;
} }
„`
2. `max-width` tulajdonság: Ez a tulajdonság a div elem maximális szélességét állítja be. Ha a div-en belüli tartalom kisebb, mint a maximális szélesség, a div ennek megfelelően módosítja a méretét. Ha például 500 pixeles maximális szélességet szeretne beállítani a div-nek, akkor a következő kódot használhatja:
„„
div {
max-width: 500px;
} }
„`
3. `min-width` tulajdonság: Ez a tulajdonság a div elem minimális szélességét állítja be. Ha a div-en belüli tartalom nagyobb, mint a minimális szélesség, a div ennek megfelelően módosítja a méretét. Ha például 300 pixeles minimális szélességet szeretne beállítani a div-nek, akkor a következő kódot használhatja:
„„
div {
min-width: 300px;
} }
„`
A kívánt eredmény eléréséhez e tulajdonságok kombinációját is használhatja. Például beállíthat egy fix szélességet a div számára, de beállíthat egy maximális szélességet is, hogy nagyobb képernyőkön ne legyen túl széles:
„`
div {
width: 500px;
max-width: 80%;
} }
„`