Laiko taupymo CSS metodai, skirti kurti reaguojančius vaizdus

Kaip žiniatinklio kūrėjas, yra didelė tikimybė, kad susidūrėte su dviem šio straipsnio priešais: vaizdais ir terminais . Kartais dėl kokių nors priežasčių jūsų vaizdai netiks išdėstymui ir nenorite valandų valandas dėl to sukti galvos.

Tokia situacija man nutiko daugybę kartų ir aš pasimokiau iš savo klaidų. Nebėra juodosios magijos įsilaužimų - čia yra mano penkios mėgstamiausios vaizdo dydžio keitimo technikos.

„OMG, KAM MAN REIKIA ŠIOS“

Penktadienis yra 17:00 val., Turite užpildyti šį puslapį, tačiau vaizdai netiks išdėstymui. Atėjo laikas pasinaudoti savo magišku triuku!

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

Skamba pažįstamai? Mes visi tai padarėme vieną kartą, ar nejučia jus apgaudinėja?

Naudoti backgroundsavybes yra labai naudinga, jos tiesiog veikia. Nepamirškite, kad kai kuriais atvejais turėtumėte juos naudoti tik vaizdams, neturintiems turinio, arba kaip teksto pakaitalą.

Kelias iš ateities

Kas būtų, jei aš jums pasakyčiau, kad tokia magija egzistuoja ir elementams? Pasakykite „labas“ objektui tinkančiai nuosavybei, kuri, beje, tinka ir vaizdo įrašams!

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

Viskas draugužiai! Pažiūrėkite, kaip covermes galime pasinaudoti, kai surinksime draugišką vertę contain.

Gerai, kokie spąstai?

Deja object-fit, IE ir senesnėse „Safari“ versijose neveiks, tačiau yra daugkartinio užpildymo.

„Netflix“ būdas

Galite pagalvoti „gražus apgaulingas žmogus, dar vienas būdas, kuris neveikia senose naršyklėse, tokiose kaip IE? Nesijaudinkite, šis veikia visur ir yra mano mėgstamiausias! Savo vaizdą turėsite apvynioti santykinai pamuštais tėvais.

Mes išlaikysime vaizdo santykį su procentais paddingnuosavybėje. Jūsų atvaizdas bus viso dydžio absoliutus vaikas.

Kodas atrodo taip:

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

- Ei, žmogau, atrodo sudėtinga.

Gavę koncepciją, technika yra paprasta ir plačiai naudojama. „Netflix“ tuo naudojasi!

Šiek tiek demonstracinė versija:

Paprastas būdas

Šį jau galite žinoti:

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

Jei jūsų išdėstymas nėra per daug sudėtingas, jis daugeliu atvejų veikia.

Spektaklio būdas (išplėstinis)

Pagal našumą turiu omenyje apkrovos laiką. Didelis herojaus vaizdas gali jį sugadinti ir priversti jūsų puslapį jaustis lėtai, ypač mobiliajame.

Ar žinojote, kad šiuolaikinėse naršyklėse galite pakeisti vaizdo šaltinį, atsižvelgdami į savo puslapio plotį? Tam ir srcsetsukurta!

Galite juos sujungti su HTML 5 žyma, kuri grakščiai degraduoja su .

Norėdami apibendrinti

  1. Naudokite, background-image jei jūsų vaizdas nėra puslapio turinio dalis.
  2. Naudokite, object-fitjei jums nerūpi IE.
  3. Paminkštintų konteinerių technika, naudojama „Netflix“, veikia visur.
  4. Daugeliu atvejų tiesiog pridėkite height: auto;savo CSS.
  5. Jei jums reikia greito įkėlimo laiko, naudokite, jei srcsetnorite įkelti mažesnius vaizdus į mobilųjį telefoną.