Reagoivat kuvat helpottivat ResponsifyJS n avulla

Nykyaikaisen webin pitäisi olla 100% reagoivaa ja uudemmat kirjastot tekevät tämän yhä useammin.

Ilmaisia ​​laajennuksia, kuten ResponsifyJS, se on jopa helpompaa saada sivustosi töihin kaikissa laitteissa. Tämä ilmainen jQuery-laajennus ottaa kuvan ja järjestää ne dynaamisesti uudelleen perustuvat vaihteleviin näytön kokoihin.

Koska eri säiliöitä pidä kuvia eri tavalla, ne voivat muuttaa kokoa hyvin outoilla tavoilla. Joskus sinulla on kuvia ihmisistä ja heidän kasvonsa voivat katketa, kun niitä muutetaan mobiililaitteissa.

Vastaajasovellus luotiin tämän ongelman ratkaisemiseksi. Se voi toimia automaattisesti, mutta todellinen taika on määrittele oma tarkennusalue kuvassa.

Se käyttää desimaalien kuvauksen sisäinen järjestelmä löytää, missä kuvan painopiste on. Esimerkiksi voit määritellä sijainnit kuten data-focus-top joka “lohkot sisään” tietyn osan kuvasta.

Nämä tiedot on siirrettävä desimaalien muodossa, esimerkiksi 0,5 desimaalia kohden 50% kuvasta (vasen / oikea tai ylhäältä / alhaalta). Luonnollisesti tämä on melko sekava tehdä itse. Mutta on olemassa ilmainen Vastuullinen sovellus jonka avulla voit laskea asemat dynaamisesti selaimessasi.

Lataa vain kuva, määritä tarkennusalue ja kopioi / liitä kuvatunnus sivustoosi. Responsify-pluginissa on kaikki tiedot, joita se tarvitsee kuvan kokoa pienemmillä näytöillä.

Löydät melko vähän live-demo-linkit GitHub-repossa, mukaan lukien koodinpätkät kopioida / liittää sivustoosi.

Tämä plugin ei ole täydellinen ratkaisu jokaiselle projektille. Joskus sinä haluta kuvien kokoa ilman kiinteitä tarkennusalueita. Mutta jos käytät muurausverkot jQueryllä se ei vahingoita lisätä ResponsifyJS: ää pinoon.

Lisätietoja on live-esittelyn plugin-kotisivulla, latauslinkillä ja koko asennusoppaalla.