În calitate de dezvoltator web, există o mare probabilitate să fi întâlnit cei doi dușmani ai acestui articol: imagini și termenele limită. Uneori, din anumite motive, imaginile dvs. nu se vor potrivi cu aspectul și nu doriți să vă înfășurați capul în jurul său timp de ore întregi.

Această situație mi s-a întâmplat de multe ori și am învățat din greșelile mele. Gata cu hacks de magie neagră – iată cele cinci tehnici ale mele preferate pentru a gestiona redimensionarea imaginii.

modul „OMG I NEVE THIS ASAP”

Vineri este ora 17:00, trebuie să finalizați această pagină, dar imaginile nu se vor potrivi cu aspectul. Este timpul să vă folosiți trucul de magie!

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

Sună cunoscut? Am făcut-o cu toții o dată, nu-ți vine să te înșeli?

Folosind background proprietățile sunt foarte utile, doar funcționează. Totuși, amintiți-vă că ar trebui să le utilizați numai pentru imagini fără conținut sau ca înlocuitor de text și în unele cazuri particulare.

Calea din viitor

Dacă ți-aș spune că există și pentru acest tip de magie <img> elemente? Spuneți „salut” proprietății care se potrivește obiectului – care, de altfel, funcționează și pentru videoclipuri!

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

Asta-i tot oameni buni! Vedeți cum obținem valoarea prietenoasă cover, putem folosi și contain.

Bine, care este capcana?

din pacate object-fit nu va funcționa pe IE și versiunile mai vechi ale Safari, dar există un polifund.

Tehnici CSS care economisesc timp pentru a crea imagini receptive
sursă: https://css-tricks.com/almanac/properties/o/object-fit/#article-header-id-4

Modul „Netflix”

S-ar putea să vă gândiți „om drăguț, un alt mod care nu funcționează în browsere vechi precum IE?”. Nu vă faceți griji, acesta funcționează peste tot și este preferatul meu! Va trebui să vă înfășurați imaginea cu un părinte relativ căptușit.

Vom păstra raportul de imagine cu un procent pe padding proprietate. Imaginea dvs. va fi un copil absolut la dimensiune completă.

Codul arată astfel:

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

„Hei omule, pare complicat.”

Odată ce ați obținut conceptul, tehnica este simplă și utilizate pe scară largă. Netflix îl folosește!

1611870245 497 Tehnici CSS care economisesc timp pentru a crea imagini receptive
Uită-te la numele clasei!

O mică demonstrație:

Modul simplu

Poate că îl știți deja:

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

Dacă aspectul dvs. nu este prea complicat, acesta funcționează în majoritatea cazurilor.

Modul de performanță (avansat)

Prin performanță, mă refer la timpii de încărcare. O imagine de erou mare poate să o distrugă și să-ți facă pagina să se simtă lentă, mai ales pe mobil.

Știați asta în browsere moderne puteți schimba o sursă de imagine în funcție de lățimea paginii dvs.? Asta e ceea ce srcset este făcut pentru!

Le puteți combina cu HTML 5 <picture> tag, care se degradează grațios cu un <img>.

<picture>
  <source media="(max-width: 799px)" >
  <source media="(min-width: 800px)" >
  <img src="https://www.freecodecamp.org/news/time-saving-css-techniques-to-create-responsive-images-ebb1e84f90d5/elva-800w.jpg">
</picture>

A recapitula

  1. Utilizare background-image dacă imaginea dvs. nu face parte din conținutul paginii.
  2. Utilizare object-fit dacă nu vă pasă de IE.
  3. Tehnica containerului căptușit, utilizată de Netflix, funcționează peste tot.
  4. În majoritatea cazurilor, trebuie doar să adăugați height: auto; în CSS.
  5. Dacă aveți nevoie de timpi de încărcare rapide, utilizați srcset pentru a încărca imagini mai mici pe mobil.