Iată cum puteți adăuga imagini de design receptive utilizând CSS
Uită-te la site-urile populare astăzi și un tratament de design pe care sunteți sigur că pentru a vedea este de mari dimensiuni, ecranul de fundal imagini. Una dintre provocările legate de adăugarea acestor imagini provine din cea mai bună practică pe care site-urile web trebuie să le răspundă la dimensiunile și dispozitivele diferite - o abordare cunoscută ca un design web receptiv .
Deoarece aspectul site-ului dvs. se modifică și se măsoară cu diferite dimensiuni ale ecranului, trebuie să se schimbe și dimensiunile respective.
De fapt, aceste "imagini fluide" sunt una dintre piesele-cheie ale site-urilor responsabile (împreună cu o grilă fluidă și interogări media). Aceste trei bucăți au fost de la începutul anului o bază de design web responsivă, dar în timp ce a fost întotdeauna destul de ușor să adăugați imagini inline receptive la un site (imaginile inline sunt graficele care sunt codificate ca parte a marcajului HTML), făcând același lucru cu imaginile de fundal (care sunt decorate în pagină utilizând proprietățile de fundal CSS) a oferit mult timp o provocare semnificativă pentru mulți designeri web și pentru dezvoltatorii din segmentul front-end. Din fericire, adăugarea proprietății "dimensiune de fond" în CSS a făcut posibil acest lucru.
Într-un articol separat, am abordat modul de utilizare a dimensiunii de fundal a proprietății CSS3 pentru a întinde imaginile pentru a se potrivi într-o fereastră, dar există o modalitate mai bună și mai utilă de a implementa această proprietate. Pentru aceasta, vom folosi următoarea combinație de proprietăți și valori:
dimensiunea fundalului: capac;
Proprietatea cuvântului cheie acoperă browser-ul pentru a scala imaginea pentru a se potrivi ferestrei, indiferent de cât de mare sau de mică este fereastra. Imaginea este scalată pentru a acoperi întregul ecran, dar proporțiile și aspectul original sunt păstrate intacte, împiedicând astfel distorsiunea imaginii.
Imaginea este plasată în geam cât mai mare posibil, astfel încât toată suprafața ferestrei să fie acoperită. Aceasta înseamnă că nu veți avea pe pagină pagini goale sau nici o denaturare a imaginii, dar de asemenea înseamnă că o parte din imagine poate fi tăiată în funcție de raportul de aspect al ecranului și imaginea în cauză. De exemplu, marginile unei imagini (fie de sus, de jos, de la stânga sau de la dreapta) pot fi tăiate pe imagini, în funcție de valorile pe care le utilizați pentru proprietatea de fundal. Dacă orientați fundalul pe "partea stângă sus", orice exces din imagine va apărea din partea de jos și din dreapta. Dacă focalizați imaginea de fundal, excesul va ieși din toate părțile, dar din moment ce acest exces este împrăștiat, impactul pe o parte va fi mai puțin servit.
Cum se utilizează dimensiunea fundalului: capac;
Când creați imaginea de fundal, este o idee bună să creați o imagine destul de mare. În timp ce browserele pot face o imagine mai mică fără un impact vizibil asupra calității vizuale, atunci când un browser mărește o imagine la o dimensiune mai mare decât dimensiunile originale, calitatea vizuală va fi degradată, devenind neclară și pixelată. Dezavantajul acestui lucru este că pagina dvs. are un impact pozitiv atunci când oferiți imagini gigant tuturor ecranelor.
Când faceți acest lucru, asigurați-vă că ați pregătit corect aceste imagini pentru a descărca viteza și livrarea pe web . În cele din urmă, trebuie să găsiți mediul fericit între o dimensiune suficient de mare a imaginii și o calitate și o dimensiune rezonabilă a fișierului pentru vitezele de descărcare.
Una dintre modalitățile obișnuite de a utiliza imagini de fundal scalare este atunci când doriți ca imaginea să preia background-ul complet al unei pagini, indiferent dacă această pagină este largă și este vizionată pe un computer desktop sau mult mai mică și este trimisă la un dispozitiv portabil, mobil dispozitive.
Încărcați imaginea în gazda web și adăugați-o în CSS ca imagine de fundal:
Imagine de fundal: url (fireworks-over-wdw.jpg);
background-repeat: nu-repeta;
fundal-poziție: centru centru;
atașament de fundal: fix;
Adăugați în prealabil browserul CSS prefixat:
-webkit-background-size: cover;
-moz-background-size: capac;
-o-background-size: cover;
Apoi adăugați proprietatea CSS:
dimensiunea fundalului: capac;
Folosind imagini diferite care se potrivesc cu diferite dispozitive
Deși designul receptiv pentru o experiență desktop sau laptop este important, varietatea de dispozitive care pot accesa Web-ul a crescut semnificativ și o varietate mai mare de dimensiuni de ecran vine cu asta.
După cum sa menționat anterior, încărcarea unei imagini de fundal foarte răspândite pe un smartphone, de exemplu, nu este un design eficient sau cu o lățime de bandă.
Aflați cum puteți utiliza interogările media pentru a afișa imagini adecvate dispozitivelor la care vor fi afișate și pentru a îmbunătăți în continuare compatibilitatea site-ului dvs. cu dispozitivele mobile.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard 9/12/17