Aega säästvad CSS-meetodid tundlike piltide loomiseks

Veebiarendajana on suur tõenäosus, et olete kokku puutunud selle artikli kahe vaenlasega: piltide ja tähtaegadega . Mõnikord ei sobi teie pildid mingitel põhjustel paigutusega ja te ei soovi tundide kaupa pead selle ümber keerata.

Seda olukorda on minuga korduvalt juhtunud ja olen õppinud oma vigadest. Musta maagia häkke pole vaja - siin on minu viis lemmiktehnikat pildi suuruse muutmiseks.

"OMG vajan seda kiiresti"

Reedel on kell 17.00, peate selle lehe lõpetama, kuid pildid ei sobi paigutusega. On aeg oma võlutrikki kasutada!

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

Kõlab tuttavalt? Me kõik oleme seda korra teinud, kas pole tunne, et teid petaks?

backgroundAtribuutide kasutamine on väga kasulik, need lihtsalt töötavad. Kuid pidage meeles, et peaksite neid kasutama ainult mittesisuliste piltide jaoks või teksti asendamiseks ja mõnel konkreetsel juhul.

Tee tulevikust

Mis oleks, kui ma ütleksin teile, et selline maagia on olemas ka elementide puhul? Öelge objektile sobivale omadusele „tere” - mis muide töötab ka videote puhul!

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

See on kõik! Vaadake, kuidas saame sõbraliku väärtuse hankimisel coverka kasutada contain.

Olgu, mis lõks on?

Kahjuks object-fitei tööta IE ja Safari vanemate versioonidega, kuid on olemas polüfill.

"Netflixi" viis

Võite mõelda: "kena trikk mees, veel üks viis, mis ei tööta vanades brauserites nagu IE?". Ärge muretsege, see töötab kõikjal ja see on minu lemmik! Peate oma pildi pakkima suhtelise polsterdatud vanemaga.

Hoiame paddingkinnistul pildi suhet koos protsendiga . Teie pilt on täissuuruses absoluutne laps.

Kood näeb välja selline:

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

"Hei mees, see tundub keeruline."

Kui olete selle kontseptsiooni saanud, on tehnika lihtne ja laialt kasutatav. Netflix kasutab seda!

Väike demo:

Lihtne viis

Võite seda juba teada:

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

Kui teie paigutus pole liiga keeruline, töötab see enamikul juhtudel.

Esitusviis (täpsem)

Jõudluse all pean ma silmas laadimisaegu. Suur kangelase pilt võib selle rikkuda ja muuta teie leht aeglaseks, eriti mobiilseadmetes.

Kas teadsite, et tänapäevastes brauserites saate pildi allikat muuta vastavalt lehe laiusele? Selleks srcseton loodud!

Võite need kombineerida HTML 5 märgendiga, mis graatsiliselt halvendab tähist .

Kokkuvõtteks

  1. Kasutage seda background-image juhul, kui teie pilt ei kuulu lehe sisusse.
  2. Kasutage, object-fitkui te ei hooli IE-st.
  3. Netflixi kasutatud polsterdatud konteineritehnika töötab kõikjal.
  4. Enamasti lisage lihtsalt height: auto;oma CSS.
  5. Kui vajate kiiret laadimisaega, kasutage srcsetväiksemate piltide laadimiseks mobiiltelefoni.