Majoritatea site-urilor web actuale sunt receptive. Și dacă trebuie să centrați și să aliniați imaginea pe site-ul respectiv, trebuie să învățați cum să faceți imaginile fluide sau receptive cu CSS.

Am postat un video tutorial care explică cum să faci un site-ul web receptiv pas cu pas acum cateva saptamani. În videoclip am creat o imagine receptivă. Dar, în această postare, aș dori să vă ofer un pic mai multe detalii despre cum să faceți imaginile receptive.

De asemenea, veți afla câteva dintre problemele generale care pot apărea atunci când încercați să faceți imaginile receptive – și voi încerca să vă explic cum să le rezolvați.

Cum să faceți imaginile sensibile cu CSS

Ar trebui să folosesc unități relative sau absolute?

Realizarea unei imagini fluide sau receptive este de fapt destul de simplă. Când încărcați o imagine pe site-ul dvs., aceasta are lățimea și înălțimea implicite. Le puteți schimba pe amândouă cu CSS.

Pentru a face o imagine receptivă, trebuie să acordați o nouă valoare proprietății sale de lățime. Apoi, înălțimea imaginii se va regla automat.

Important este să știți că trebuie să utilizați întotdeauna unități relative pentru proprietatea de lățime ca procent, mai degrabă decât cele absolute, cum ar fi pixeli.

img {
  width: 500px;
}
CSS Responsive Image Tutorial Cum sa faceti imaginile receptive cu

De exemplu, dacă definiți o lățime fixă ​​de 500 px, imaginea dvs. nu va răspunde – deoarece unitatea este absolută.

img {
  width: 50%;
}
1611775447 475 CSS Responsive Image Tutorial Cum sa faceti imaginile receptive cu

De aceea, ar trebui să atribuiți o unitate relativă de 50%. Această abordare vă va face imaginile fluide și vor putea să se redimensioneze, indiferent de dimensiunea ecranului.

Ar trebui să folosesc interogări media?

Una dintre întrebările pe care mi le adresez cel mai mult este dacă ar trebui să utilizați interogări media sau nu.

O interogare media este o altă caracteristică importantă a CSS, care ajută la reacționarea unui site web. Nu voi intra în mai multe detalii aici, dar puteți citi cealaltă postare mai târziu pentru a afla cum să utilizați interogările media în detaliu.

Răspunsul la această întrebare este: „depinde”. Dacă doriți ca imaginea dvs. să aibă dimensiuni diferite de la un dispozitiv la altul, atunci va trebui să utilizați interogări media. Altfel, nu o vei face.

Acum, pentru acest exemplu, imaginea dvs. are o lățime de 50% pentru orice tip de ecran. Dar când doriți să o faceți la dimensiunea completă pentru dispozitivele mobile, trebuie să obțineți ajutor din interogările media:

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}
1611775447 458 CSS Responsive Image Tutorial Cum sa faceti imaginile receptive cu

Deci, pe baza regulii de interogare media, orice dispozitiv mai mic de 480 px va lua dimensiunea completă a lățimii ecranului.

De asemenea, puteți urmări versiunea video a acestei postări mai jos:

De ce proprietatea cu lățimea maximă nu este grozavă?

Un alt mod prin care dezvoltatorii pot crea imagini receptive este proprietatea de lățime maximă. Cu toate acestea, aceasta nu este întotdeauna cea mai bună metodă de utilizat, deoarece este posibil să nu funcționeze pentru orice tip de dimensiune a ecranului sau dispozitiv.

Primul lucru pe care trebuie să îl înțelegem înainte de a trece mai departe cu un exemplu este ceea ce face exact proprietatea lățime maximă.

Proprietatea de lățime maximă stabilește o lățime maximă pentru un element, care nu permite lățimea acelui element să fie mai mare decât valoarea sa de lățime maximă (dar poate fi mai mică).

De exemplu, dacă imaginea are o lățime implicită de 500 px și dacă dimensiunea ecranului dvs. are doar 360 px, atunci nu veți putea vedea imaginea completă, deoarece nu există suficient spațiu:

img {
  max-width: 100%;
  width: 500px;  // assume this is the default size
}
1611775448 361 CSS Responsive Image Tutorial Cum sa faceti imaginile receptive cu

Prin urmare, puteți defini o proprietate de lățime maximă pentru imagine și setați-o la 100%, ceea ce reduce imaginea de 500 px la spațiul de 360 ​​px. Deci, veți putea vedea imaginea completă pe un ecran de dimensiuni mai mici.

Lucrul bun este că, deoarece utilizați o unitate relativă, imaginea va fi fluidă pe orice dispozitiv mai mic de 500 px.

Din păcate, dimensiunea ecranului va deveni ceva mai mare de 500 px, dar imaginea nu o va face deoarece are o lățime implicită de 500 px. Această abordare va rupe sensibilitatea imaginii.

Pentru a remedia acest lucru, trebuie să utilizați din nou proprietatea de lățime, ceea ce face ca proprietatea de lățime maximă să fie inutilă.

Dar Heights?

O altă problemă obișnuită pe care o puteți întâlni are legătură cu proprietatea înălțime. În mod normal, înălțimea unei imagini se redimensionează automat, deci nu este nevoie să atribuiți o proprietate de înălțime imaginilor dvs. (deoarece întrerupe imaginea).

Dar, în unele cazuri, este posibil să trebuiască să lucrați cu imagini care trebuie să aibă o înălțime fixă. Deci, atunci când atribuiți o înălțime fixă ​​imaginii, aceasta va fi în continuare receptivă, dar nu va arăta bine.

img {
  width: 100%;
  height: 300px;
}
1611775448 66 CSS Responsive Image Tutorial Cum sa faceti imaginile receptive cu

Din fericire, există o altă proprietate pe care CSS o oferă pentru a remedia această problemă …

Soluție: Proprietatea Fit-Object

Pentru a avea mai mult control asupra imaginilor dvs., CSS oferă o altă proprietate numită obiect-fit. Să folosim proprietatea de potrivire a obiectului și să atribuim o valoare, care va face ca imaginea dvs. să arate mai bine:

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}
1611775448 593 CSS Responsive Image Tutorial Cum sa faceti imaginile receptive cu

Dacă este necesar, puteți utiliza și proprietatea poziție obiect (pe lângă potrivirea obiectului) pentru a vă concentra pe o anumită parte a imaginii. Mulți oameni nu sunt conștienți de proprietatea potrivită obiectului, dar poate fi util să remediați aceste tipuri de probleme.

Sper că această postare te-a ajutat să înțelegi și să-ți rezolvi problemele cu imagini receptive. Dacă doriți să aflați mai multe despre dezvoltarea web, nu ezitați să verificați Canalul canalului YouTube.

Mulțumesc că ai citit!