A reszponzív kép az, amelynek mérete reagál a képernyőfelbontás változásaira. A reszponzív képek koncepcióját az váltotta ki, hogy olyan problémákat kellett megoldani, mint a különböző képméretek különböző eszközökön való kiszolgálása, és ez abban nyilvánult meg, hogy ezt a rugalmasságot a méreteken túlmutató dolgokra is felhasználták, mint például a művészeti irány, a képtípusok stb. A reszponzív képek specifikációja csak a reszponzív dizájn megjelenése után készült.
Az idő előrehaladtával a reszponzív képek megvalósításának számos módja került hozzáadásra, és ezek a kiegészítések, miközben kibővítették a front-end fejlesztői eszköztárat, meglehetősen bonyolulttá tették a reszponzív képek használatát. Éppen ezért, bár a technológia már elég régóta létezik, csak nemrég döntöttem úgy, hogy belevágok ebbe a témába. És ez az összetettség az oka annak is, hogy ahogy haladtam a merülésben, rájöttem, hogy minden olvasott forrásból hiányzik valami, és nem a teljes képet mutatja (nem szánt szójáték).
Miután elolvastam és tanulmányoztam sok forrást, úgy döntöttem, írok egy végleges útmutatót, amelybe remélhetőleg belefoglalom a reszponzív képek megvalósításához szükséges összes módszert és a megértéshez szükséges összes információt, így ez lesz a teljes útmutató. Reszponzív képek.
A nagy sűrűségű képernyők rövid bemutatása
Mielőtt belevágnánk a reszponzív képek megvalósításának módszereibe, van egy fontos koncepció, amelyet meg kell értenünk a pixelegység a weben kapcsán: Hajlamosak vagyunk azt gondolni, hogy a mobileszközökön a betöltött képeknek kisebbnek kell lenniük. mivel a készülékek szélessége kisebb. De ez nem mindig igaz.
„A pixel nem pixel”
Különbség van a CSS-felbontás és a Képernyőfelbontás között: a CSS-felbontást használjuk a webhelyünkön végzett mérésekhez, a Képernyőfelbontást pedig a képpontok tényleges száma a képernyőn. Napjainkban ez a különbség minden mobil képernyőn és egyes asztali képernyőkön létezik.
Példa:
Samsung Galaxy S10 felbontások:
Eszközfelbontás – 1440 x 3040 képpont
CSS felbontás – 360 képpont 760 képponttal
Sűrűségű kijelző – 4x (4-szer minden képponthoz)
Ez azt jelenti, hogy ha például egy 300 pixel széles képe van, akkor betölthet egy akár 4-szer szélesebb képet (1200 pixel széles), és valóban élesebb képet láthat!
Hajlamosak vagyunk azt gondolni, hogy a mobileszközökön a betöltött képeknek kisebbnek kell lenniük, mivel az eszközök szélessége kisebb. De ez nem mindig igaz.
De vigyázat: a nagyobb kép megjelenítésének ára van. A nagyobb képek lassabban töltődnek be, és ez a lassúság felerősödik a mobileszközökön, mert az internet sebessége meglehetősen korlátozott. Tehát mérlegelnie kell az előnyöket és hátrányokat, és el kell döntenie, hogy a képélesség mikor éri meg a képbetöltési idő késését.
Ebben a bejegyzésben nyolc módszert írok le a reszponzív tervezés megvalósítására. Az első kettő a <img> elemet és a srcset attribútumot használja; a következő kettő a <picture> elemet használja; a következő kettő használja a CSS-t: az egyik a image-setattribútumot, a másik pedig a médialekérdezési tulajdonságokat használja a reszponzív tervezéshez (a min-resolution és a max-resolution erős>); az utolsó kettő a CSS jövőbeli funkciója, amely egy image() nevű CSS-függvényt használ.
A sokféle módszer oka az, hogy van néhány megoldandó probléma a reszponzív tervezésben: kisebb képek megjelenítése keskenyebb képernyőkön; a képernyő sűrűségének kihasználása; a kép fókuszának megváltoztatása különböző felbontásokban; olyan képfájltípusok használatával, amelyeket nem minden böngésző támogat.
Most belemerülhetünk reszponzív képmódszereinkbe:
A megjelenítési sűrűségleíró módszer
Ez a módszer a rögzített képmérettel rendelkező képekhez alkalmas nagy sűrűségű képernyőkön. Ez azt jelenti, hogy egyes képernyőkön egy 200 pixeles CSS/HTML tényleges méretű képhez 600 pixeles – vagy nagyobb szélességű – képet is betölthetünk, mert a képernyő nagy sűrűsége jobban megjeleníti.
A módszer megvalósításához az új srcsetattribútumot használjuk a megjelenítési sűrűség leírójával. A srcset attribútumot különböző méretű képek tömbjével határozzuk meg, és az egyes méreteket milyen képernyősűrűséggel kell megjeleníteni. A megjelenítési sűrűségleíró leírja, hogy mennyivel legyen sűrűbb a felbontás az egyes képméretek használatakor: 1x, 2x, 4x stb.
Megjegyzés! A megjelenítési sűrűség leírója a képet a képernyő pixelsűrűsége, nem pedig a kép tényleges mérete alapján választja ki.
Javasolt továbbra is a normálsrcattribútum használata, mert a srcset-t nem támogató böngészők, például az IE és az Opera mini.
<img src="cat-200px.jpg" alt="sugar free cat" width="200"
srcset="cat-200px.jpg 1x,
cat-400px.jpg 2x,
cat-600px.jpg 3x,
cat-800px.jpg 4x">
"Élő példa a pixelsűrűség-leíróra a CodeSandBoxon"
A szélességleíró módszer és a méret attribútum
Ez a módszer alkalmas azokhoz a képekhez, amelyek szélessége a nézetablak méretétől függően változik és a mi reszponzív töréspontjaink. Ez az eset a leggyakoribb az adaptív webhelyeken.
Srcset Attribútum szélességleíróval
Ebben a módszerben a srcset attribútumot egy képtömbbel határozzuk meg, és azt, hogy az egyes képek milyen szélességben jelenjenek meg (meg kell adnunk a szélességet, mert a böngésző nem „tudja” a kép tényleges szélességét). Ez a módszer, ha önmagában használjuk a sizes attribútum nélkül, a böngésző azon feltételezésén alapul, hogy a kép szélességének ki kell töltenie a nézetablak szélességét.
Ez a módszer kissé hasonlít a Density Descriptor módszerhez, mivel a srcset attribútumot használja egy képtömbhöz és az egyes képek megjelenítési feltételeihez. De ez annyiban különbözik, hogy a tömb egyes képeinek használatának definíciója a kép szélességén és nem a képernyő sűrűségén alapul. Vagyis a szélességleírót (az a szélesség, amelyet a képnek szeretnénk elérni) használja, nem pedig a sűrűségleírót. de ez a nagy sűrűségű képernyőkre vonatkozik majd.
Megjegyzés: Annak ellenére, hogy a böngésző a szélesség leírót használja, és nem a megjelenítési sűrűség leírót, a böngésző továbbra is figyelembe veszi a nagy sűrűségű képernyőket.
A Méretek attribútum
Amellett, hogy a böngészőnek megadjuk a képek listáját a szélességleíróval (a srcset attribútum használatával), meg kell adnunk a böngészőnek a kép méretét a böngésző képernyőjéhez képest, ehhez pedig a sizes attribútumot kell megadnunk.
A A méretek attribútum a médiafeltételek tömbje, mindegyik feltételhez egy képmérettel. (Megjegyzés: A médiafeltételek mennyisége nem feltétlenül egyezik meg a tömbben lévő képek számával, amint azt a következő példákban láthatja.) A médiafeltételeken túlmenően meg kell adnunk , mint a tömb utolsó eleme, egy szélességi érték, amelyhez nincs médiafeltétel. Ez az érték lesz a tartalékunk, ha a médiafeltételek egyike sem teljesül.
Képméret feltétele – 3 általános egységhasználat létezik: a vw egység, a px egység, és ezek kombinációja a calc függvény használatával, például calc(30vw + 300px).
Példa egy összetett állapotra:
sizes="(max-width: 399px) 50vw,
(min-width: 400px) and (max-width: 900px) calc(30vw - 40px),
100vw">Egy normál reszponzív webhelyen a méreteknek általában csak egy feltétele és egy tartaléka van, a srcset pedig többféle képméret- és -szélesség-kombinációt tartalmaz:
<img src="cat.jpg" alt="cat on a watermelon"
srcset="cat-200px.jpg 200w,
cat-400px.jpg 400w,
cat-600px.jpg 600w"
sizes="(max-width:800px) 30vw, 600px">
Miután megadta a böngészőnek a srcset képtömböt és a CSS-kép tényleges méretét médiafeltételenként, a böngésző az összes paraméter figyelembevétele után kiválasztja a megfelelő képet. És ne aggódjon, a nagy sűrűségű képernyőkön a böngésző a valódi eszköz pixelarányának megfelelően választja ki a képet.
‹Kép› Elem
Eddig csak a <img> elemről beszéltünk, és a legtöbb esetben ez is elég lesz, mert a srcset és sizes attribútumokkal rendelkező <img> elem elvégzi a munka nagy részét. De a <picture> elemnek is vannak módjai a reszponzív elemek megvalósítására, és a következő két módszer ezeket az összetettebb esetekben használja:
‹kép› Művészeti irányítási módszer
A Művészeti iránymódszer egy módja annak, hogykülönböző arányú képeket vagy különböző fókuszpontokat jelenítsen meg különböző eszközökön. A <picture> elemmel a képernyő Device CSS szélességétől függően más forrást tudunk betölteni. Így kiválaszthatja ugyanazt a képet más vágással, és ezáltal a kisebb képernyőkön a kép értelmes részére fókuszálhat.
Hogyan működnek a művészeti irányítási módszerek?
A <picture> elemen belül a <source> elemet használjuk. Minden <source> elemben 2 attribútumot határozunk meg: media és srcset. A media attribútum értéke egy médialekérdezés, ugyanaz, mint a szokásos reszponzív tervezési médialekérdezések, és minden médialekérdezési feltételhez egy srcset attribútum van megadva.
Annyi <source> elemet adhatunk hozzá, amennyire szükségünk van.
Az összes <source> elem után hozzáadunk egy normál <img> elemet. A <img> elem hozzáadása elengedhetetlen, mert enélkül a képkép nem működik. Ezen kívül más fontos okok is vannak a <img> elem hozzáadására:
- Ha a böngésző nem támogatja a
<picture>elemet, akkor a<img>elem kerül felhasználásra (ez például az IE és Opera mini böngészőben). - Ha egyik
<source>elem sincs megcélozva, a böngésző a<img>elemet használja. - A kisegítő lehetőségek
altattribútuma csak a képelemhez adható hozzá.
A <source> elemek írási sorrendje azért fontos, mert a böngésző az első működő forrást választja. Íme egyillusztráció a működéséről:
Teljes HTML példa:
<picture>
<source media="(min-width:600px) and (max-width:1200px)"
srcset="images/sinai-medium-screen.jpg">
<source media="(min-width:1201px)"
srcset="images/sinai-large-screen.jpg">
<img src="images/sinai-small-screen.jpg" alt="Unicorn Pool Float">
</picture>
"A Google által készített Híres macska kísérlet a Művészeti iránymódszerrel", amikor az <picture> elem a krómozásba került 🙂
‹kép› a Képtípusok módszeréhez
Az <picture> elem másik használata olyan képtípusok használatakor, amelyeket nem minden böngésző támogat. A Google például kifejlesztett egy új típusú tömörített képeket, a webp nevet. A Webp szolgáltatást nem minden böngésző támogatja – például az IE és a Safari nem támogatja. És itt is az <picture> elem jön segítségül, de egy másik változatban.
Ebben az esetben az type új attribútumot használjuk az <source> elemen. Minden type attribútum más-más képet céloz meg, az srcset attribútummal kombinálva. Csakúgy, mint a fenti példákban, az <source> elemek írási sorrendje azért fontos, mert a böngésző az első működő forrást választja, és ha egyik forrás sem működik, akkor az <img> elemet használja tartalékként. Íme egyillusztráció:
<picture> <source type="image/svg+xml" srcset="logo.svg"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="investing.com"> </picture>
Számos képtípus létezik, és megtalálhatók a Mozilla általános használati esetei vagy a Képtípusok teljes listája.
Reszponzív képek CSS-ben
Eddig csak HTML-t használtunk a reszponzív képek létrehozásához. A legtöbb esetben ez biztosan elég, de a CSS-ben a reszponzív képeknek két funkciója van, amelyeket ismernie kell.
A képbeállítás funkció
Az image-set függvény paramétere képek és sűrűségek párjainak tömbje, hasonlóan ahhoz, amit a srcset attribútum tartalmaz a The Pixel Density Descriptor Method programban. A böngésző a képernyő sűrűségének megfelelően választja ki a képet.
background-image: image-set( url("bg.png") 1x,
url("bg-2x.png") 2x );
Megjegyzés: A image-set korábban érkezett, mint a srcset, és nem frissült, és hiányzik a szélességleíró funkció is. Ezért a böngésző csak a képernyő sűrűsége és nem a tényleges képméret alapján választja ki a képet!
képkészlet böngésző támogatás
Úgy tűnik, ez a funkció feledésbe merült – egyes böngészők egyáltalán nem támogatják, és néhánynak továbbra is szüksége van a -webkit előtagra. Az összes böngésző teljes célzásához használja a példa szerint
background-image: url("bg.png"); /* IE / Edge / Firefox */
/* Chrome & Opera */
background-image: -webkit-image-set( url("bg.png") 1x,
url("bg-2x.png") 2x);
background-image: image-set( url("bg.png") 1x,
url("bg-2x.png") 2x);
Sűrűségű médialekérdezések
Két médialekérdezési tulajdonság létezik az adaptív tervezéshez: a minimum felbontás és a max. felbontás. Ezek is, például a image-set, azokra az esetekre alkalmasak, amikor azt szeretné, hogy a kép a képernyő sűrűségének megfelelően változzon. A különbség azonban ez a módszer és a image-set függvény között az, hogy itt bármilyen stílust használhat.
Megjegyzés: A Safari böngésző a tulajdon régi szintaxisát használja, a webkit előtaggal: -webkit-min-device-pixel-ratio és -webkit-max-device-pixel-ratio. Az összes böngésző támogatásához mindkettőt használnia kell. Példa:
A CodePen reszponzív képernyősűrűség-tesztjének teljes példája
A reszponzív képek jövőbeli funkciói
CSS Art Direction az Image() funkcióval
Ahogy a „Picture art direction method”-nál láttuk, vannak olyan esetek, amikor másképpen akarjuk levágni a képet, a CSS nézetablak szélességétől függően. A HTML-ben szereplő módszerrel szemben van egy specifikáció a képek CSS használatával történő vágására!
A funkciót a image() függvény valósítja meg. Paraméterei egy kép URL-je és négy szám: kezdő X pozíció, kezdő Y pozíció, szélesség és < erős>magasságot.
background-image: image('myimage.webp#xywh=0,20,40,60');Ami ezt jobb megvalósítássá teszi a „Picture art direction method”-nál, az az, hogy az előbbi módszer különböző képeket használ, mindegyik másképp van kivágva, miközben ez a módszer lehetővé teszi számunkra, hogy ugyanazt a képet használjuk, és másképp vágjuk le. a CSS image() függvény.
CSS képtípusokhoz módszer
Ahogy a „Kép a képtípusokhoz módszernél” láttuk, vannak olyan esetek, amikor különböző típusú képeket szeretnénk betölteni, a böngésző támogatásától függően. Ennek a szolgáltatásnak is van CSS specifikációja, és ez is a image() függvényt használja, bár más szintaxissal. Itt a image() függvény használatakor különböző típusú képeket adhatunk neki, és a böngésző a beírásuk sorrendjében végigmegy rajtuk, és az első általa támogatott képtípust használja.
.help::before {
content: image("try.webp", "try.svg", "try.gif");
}Sajnos ezeknek az új funkcióknak egyelőre nincs támogatása. További információt talál róluk a Mozilla Képfunkciók oldalán.
Végső szavak
Ennyi.
Remélem, hogy tetszett a cikk, és tanult a tapasztalataimból.
Ha tetszik ez a bejegyzés, örömmel veszem a tapsot és a megosztást :-)
Követhetsz a Twitteren.
További CSS-bejegyzéseim a reszponzív tervezésről:
„A CSS-felbontás és az eszközfelbontás közötti különbség” — ÚJ!
„Az új reszponzív tervezés evolúciója »
Ki vagyok én?
Elad Shechter vagyok, a CSS- és HTML-tervezésre és -architektúrára szakosodott webfejlesztő. Az "Investing.com"-nál dolgozom.
Megtalálhatsz a Facebook csoportjaimban:
CSS Masters
CSS Masters Israel
Erőforrások
- „Itt vannak a reszponzív képek. Most mi? Jason Grigsby – An Event Apart videó»
- "Retina Display Media Query"
- "Mozilla fejlesztő"
