A mai weboldalak többsége reagál. Ha pedig középre kell állítania és igazítania kell a képet ezen a webhelyen, meg kell tanulnia, hogyan lehet a képeket folyékonyá vagy reagálóképessé tenni a CSS segítségével.
Néhány hete közzétettem egy oktató videót, amely elmagyarázza, hogyan lehet lépésről lépésre elkészíteni egy rugalmas weboldalt. A videóban egy képet reagáltattunk. De ebben a bejegyzésben szeretnék egy kicsit részletesebben bemutatni, hogyan lehet a képeket érzékenyebbé tenni.
Megtanul néhány olyan általános problémát is, amelyek akkor fordulhatnak elő, amikor megpróbálja a képeket érzékenyebbé tenni - és megpróbálom elmagyarázni, hogyan lehet megoldani őket.
Hogyan lehet a képeket érzékenyebbé tenni a CSS segítségével
Használjak-e relatív vagy abszolút mértékegységeket?
A kép folyékonyá vagy reszponzivá tétele valójában nagyon egyszerű. Amikor feltölt egy képet a webhelyére, annak alapértelmezett szélessége és magassága van. CSS-sel mindkettőt megváltoztathatja.
Ahhoz, hogy a kép érzékeny legyen, új értéket kell adnia a szélesség tulajdonságának. Ekkor a kép magassága automatikusan beállítja magát.
A legfontosabb tudnivaló, hogy a szélesség tulajdonsághoz, például a százalékhoz, mindig relatív egységeket kell használni, nem pedig abszolút értékeket, mint a képpontok.
img { width: 500px; }
Például, ha fix 500px szélességet határoz meg, akkor a kép nem lesz érzékeny - mert az egység abszolút.
img { width: 50%; }
Ezért inkább hozzárendeljen egy relatív egységet, például 50% -ot. Ez a megközelítés a képeket folyékonnyá teszi, és képesek lesznek átméretezni magukat a képernyő méretétől függetlenül.
Használjam a média lekérdezéseket?
Az egyik kérdés, amelyet a legjobban felteszek, hogy média lekérdezéseket használ-e vagy sem.
A média lekérdezés a CSS másik fontos jellemzője, amely segít a webhelyet érzékenyebbé tenni. Itt nem részletezem a részleteket, de később elolvashatja a másik bejegyzésemet, hogy megismerje a média lekérdezések részletesebb használatát.
A válasz erre a kérdésre a következő: „attól függ”. Ha azt szeretné, hogy képe különböző méretű legyen az egyik eszközről a másikra, akkor média lekérdezéseket kell használnia. Különben nem fogod.
Most ebben a példában a kép 50% szélességű bármilyen képernyőn. De ha teljes méretűvé szeretné tenni mobileszközökhöz, segítséget kell kérnie a média lekérdezéseitől:
@media only screen and (max-width: 480px) { img { width: 100%; } }
Tehát a média lekérdezés szabálya alapján minden 480px-nél kisebb eszköz teljes méretét a képernyő szélességének felel meg.
A bejegyzés videó változatát az alábbiakban is megtekintheti:
Miért nem nagy a max-width tulajdonság?
Egy másik módszer, amellyel a fejlesztők érzékeny képeket készíthetnek, a max-width tulajdonság. Ez azonban nem mindig a legjobb módszer, mert nem biztos, hogy minden képernyőméretnél vagy eszköznél működik.
Először meg kell érteni, mielőtt továbblépnénk egy példával, hogy mit csinál pontosan a max-width tulajdonság.
A max-width tulajdonság egy elem maximális szélességét állítja be, ami nem engedi, hogy az elem szélessége nagyobb legyen, mint a max-width értéke (de lehet kisebb is).
Például, ha a kép alapértelmezett szélessége 500 képpont, és ha a képernyő mérete csak 360 képpont, akkor a teljes képet nem fogja látni, mert nincs elég hely:
img { max-width: 100%; width: 500px; // assume this is the default size }
Ezért meghatározhat egy maximális szélességű tulajdonságot a képhez, és beállíthatja 100% -ra, ami az 500 képpontos képet 360 képpontosra csökkenti. Tehát a teljes képet kisebb méretű képernyőn láthatja.
A jó dolog az, hogy mivel relatív egységet használ, a kép minden 500px-nél kisebb eszközön folyékony lesz.
Sajnos a képernyő mérete valamivel nagyobb lesz, mint 500 képpont, de a kép nem, mert alapértelmezetten 500 képpont szélességű. Ez a megközelítés megtöri a kép érzékenységét.
Ennek kijavításához újra be kell használnia a width tulajdonságot, ami haszontalanná teszi a max-width tulajdonságot.
Mi van a Magassággal?
Egy másik gyakori probléma, amellyel találkozhat, a magasság tulajdonságával függ össze. Normális esetben a kép magassága automatikusan átméretezi önmagát, így nem kell magasságtulajdonságot rendelnie a képekhez (mert ez elrontja a képet).
Bizonyos esetekben azonban olyan képekkel kell dolgoznia, amelyeknek rögzített magassággal kell rendelkezniük. Tehát amikor rögzített magasságot rendel a képhez, akkor is reagál, de nem fog jól kinézni.
img { width: 100%; height: 300px; }
Szerencsére van egy másik tulajdonság, amelyet a CSS kínál a probléma megoldására ...
Megoldás: Az Object-Fit tulajdonság
Ahhoz, hogy jobban ellenőrizhesse a képeket, a CSS biztosít egy másik tulajdonságot, az úgynevezett object-fit. Használjuk az object-fit tulajdonságot, és rendeljünk hozzá egy értéket, amely jobb képpé teszi a képet:
img { width: 100%; height: 300px; object-fit: cover; object-position: bottom; }
Szükség esetén az object-position tulajdonságot is használhatja (az object-fit mellett) a kép egy adott részére fókuszálva. Sokan nincsenek tisztában az objektumillesztés tulajdonságával, de hasznos lehet az ilyen jellegű problémák megoldása.
Remélem, hogy ez a bejegyzés segített megérteni és megoldani problémáit érzékeny képekkel. Ha szeretne többet megtudni a webfejlesztésről, nézze meg bátran a Youtube csatornámat.
Köszönöm, hogy elolvasta!