Aikaa säästävät CSS-tekniikat reagoivien kuvien luomiseksi

Verkkokehittäjänä on erittäin todennäköistä, että olet kohdannut tämän artikkelin kaksi vihollista: kuvat ja määräajat . Joskus jostain syystä kuvat eivät sovi asetteluun, etkä halua kietoa päätäsi tämän ympärille tuntikausia.

Tämä tilanne on tapahtunut minulle monta kertaa ja olen oppinut virheistäni. Ei enää mustaa maagista hakkerointia - tässä on viisi suosikkitekniikkaani kuvan koon muuttamiseksi.

"OMG TARVIT TÄMÄN ASAPIN" tavalla

Perjantaina on kello 17:00, sinun on viimeisteltävä tämä sivu, mutta kuvat eivät sovi asetteluun. On aika käyttää taikuustemppuasi!

.myImg { background-image: url("my-image.png"); background-size: cover; }

Kuulostaa tutulta? Olemme kaikki tehneet sen kerran, eikö olekin huijata sinua?

backgroundOminaisuuksien käyttö on erittäin hyödyllistä, ne vain toimivat. Muista kuitenkin, että sinun tulee käyttää niitä vain ei-sisältökuviin tai tekstin korvaamiseen ja joissakin erityistapauksissa.

Tie tulevaisuudesta

Entä jos sanoisin, että tällainen taika on olemassa myös elementeille? Sano "hi" object-fit -ominaisuudelle - joka toimii muuten myös videoissa!

.myImg { object-fit: cover; width: 320px; height: 180px; }

Siinä kaikki ihmiset! Katso, kuinka covervoimme myös käyttää, kun haemme ystävällisen arvon contain.

Okei mikä ansa on?

Valitettavasti object-fitei toimi IE: ssä ja Safarin vanhemmissa versioissa, mutta siinä on monitäyttö.

"Netflix" -tapa

Saatat ajatella "mukava temppumies, yksi tapa, joka ei toimi vanhoissa selaimissa, kuten IE?". Älä huoli, tämä toimii kaikkialla ja on suosikkini! Sinun on käärittävä kuva suhteellisen pehmustetun vanhemman kanssa.

Säilytämme kuvasuhteen prosentteina paddingkiinteistössä. Kuvastasi tulee täysikokoinen absoluuttinen lapsi.

Koodi näyttää tältä:

.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }

"Hei mies, se näyttää monimutkaiselta."

Kun saat käsitteen, tekniikka on yksinkertainen ja laajasti käytetty. Netflix käyttää sitä!

Pieni esittely:

Yksinkertainen tapa

Saatat jo tietää tämän:

img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }

Jos asettelu ei ole liian monimutkainen, se toimii useimmissa tapauksissa.

Suorituskyky (edistynyt)

Suorituskyvyllä tarkoitan latausaikoja. Suuri sankarikuva voi pilata sen ja saada sivusi tuntumaan hitaalta etenkin mobiililaitteissa.

Tiesitkö, että nykyaikaisissa selaimissa voit vaihtaa kuvalähdettä sivusi leveyden mukaan? Se srcseton tehty!

Voit yhdistää ne HTML 5 -tunnisteeseen, joka sulavasti sulautuu .

Kiteyttää

  1. Käytä, background-image jos kuvasi ei ole osa sivun sisältöä.
  2. Käytä, object-fitjos et välitä IE: stä.
  3. Netflixin käyttämä pehmustettu säiliötekniikka toimii kaikkialla.
  4. Useimmissa tapauksissa lisää height: auto;vain CSS: ään.
  5. Jos tarvitset nopeita latausaikoja, käytä srcsetpienempien kuvien lataamiseen matkapuhelimeen.