Adaptív kép az oldalon

Képek az adaptív (alkalmazkodva 🙂) design, mint ismeretes, az egyik legnehezebb oldala. Meg kell vizsgálni minden eleme, hogy minden látszott jól a különböző eszközökön és képernyőkön a nagy, széles képernyő a képernyők 320 pixel. Mivel a „tér” monitor megy, akkor fokozatosan felváltották a szélesvásznú TV, monitorok és tablettát. Kép kell nyomni és feszített, ill.

általános megoldás

Általános szabály, hogy mielőtt a következő CSS kódot, hogy a kép adaptív:

Az általunk használt max-width tulajdonság: 100%, hogy a kép soha nem megy túl a szülő konténer (a blokk). Ezért, ha a változás a blokk, amelyben a kép a kép felbontása ennek megfelelően módosul. A tulajdon magasság: auto; Ő a felelős azért, hogy az arányosság oldalainak maradt kép, ha pikkelyes.

Egy új megoldás a problémára (adaptív kép) -

- ez egy új címkét, amely megjelent a HTML5 változata. Ez lehetővé teszi, hogy a képek az adaptív és a működési elve hasonló a címkék

Ez lehetővé teszi, hogy töltse be a különböző képeket a körülményektől függően:

Eredményei médialekérdezéseket (médialekérdezéseket);

Sűrűsége pixel.

Betöltése a legoptimálisabb és megfelelő képet;
A kép lehet levágni függően a képernyő méretét;
Töltsön nagyméretű képek nagy felbontású monitorokat.

Hogyan működik tag ?

Tekintsük a következő lépéseket:

Hozzon létre egy nyitó és záró tag .

Belül ez a címke, írunk annyi tag . szükséges feltételeket.

A média attribútum a tag írjon e magasságát és szélességét a feltételeket, amelyek mellett a megjeleníteni kívánt kép.

A srcset attribútum meghatározza az elérési utat a képet.

Hozzáadásával további tag image .

Lehet, hogy észrevette, hogy a szintaxis használt attribútum a média nagyon hasonlít a CSS média lekérdezés szintaxist. Továbbá, mivel a körülmények alkalmazhatók max-width. min-szélesség. max-magasságot. min-magasság. orientáció.

Használja ezt a csekket, hogy meghatározza azokat a feltételeket vízszintes vagy függőleges helyzetben a tabletta, vagy mobil eszköz, és a maximális mérete a képernyőn. Például:

Vagyis azt, hogy feltölt egy speciális változata a képet, attól függően, hogy a felhasználó a képernyő felbontását.

használata

Ez a címke jól támogatott böngészők Chrome, Opera és a Firefox. A jövőben a tervek szerint ez a címke is széles körben használják.

A fájl letöltése után picturefill.js csatlakoztassa a címkék között :

Ez a címke van betöltve segítségével ez a plugin működik bizonyos korlátozások.

Az alkalmazkodóképesség helyszínen prioritássá vált, amikor azt létrehozzák. Végtére is, a jogot, hogy hozzon létre egy olyan struktúra nincs szükség külön mobil site létrehozása. Mivel maga a sablon fogja igazítani a megfelelő felbontást. 🙂

Kapcsolódó cikkek

előző ◈ a következő