A continuació s'explica com afegir imatges de disseny sensibles amb CSS
Mireu els llocs web més populars d'avui i un tractament de disseny que segurament veurà és gran, amb imatges de fons que abasten pantalla. Un dels reptes amb l'addició d'aquestes imatges prové de les millors pràctiques que els llocs web han de respondre a diferents mides i dispositius de pantalla: un enfocament conegut com a disseny web sensible .
Atès que els canvis de disseny i escales del lloc web amb diferents mides de pantalla, també cal que aquestes imatges de fons escalfin la seva mida en conseqüència.
De fet, aquestes "imatges fluides" són una de les peces clau de llocs web responsables (juntament amb una consulta de quadrícules i fluids). Aquestes tres peces han estat un element bàsic de disseny web atractiu des del principi, però tot i que sempre ha estat bastant fàcil afegir imatges en línia sensibles a un lloc (les imatges en línia són els gràfics codificats com a part del marcat HTML), fent el igual que les imatges de fons (que estan dissenyades a la pàgina amb propietats de fons CSS) han proporcionat un repte significatiu per a molts dissenyadors web i desenvolupadors de la interfície. Afortunadament, l'addició de la propietat "fons" a CSS ha fet que això sigui possible.
En un article separat, vaig cobrir com utilitzar la mida de fons de la propietat CSS3 per estirar les imatges per adaptar-se a una finestra, però hi ha una manera encara millor i més útil de desplegar per a aquesta propietat. Per fer-ho, utilitzarem la següent propietat i combinació de valors:
fons: tapa;
La propietat de la paraula clau de coberta indica al navegador que escalfi la imatge per adaptar-se a la finestra, independentment de la grandària o la petita que obtingui aquesta finestra. La imatge s'escala per cobrir tota la pantalla, però les proporcions originals i la relació d'aspecte es mantenen intactes, evitant que la imatge es distorsioni.
La imatge es col·loca a la finestra el més gran possible perquè tota la superfície de la finestra estigui coberta. Això vol dir que no tindreu cap espai en blanc a la vostra pàgina ni cap distorsió a la imatge, però també significa que es pot retallar part de la imatge depenent de la relació d'aspecte de la pantalla i de la imatge en qüestió. Per exemple, les vores d'una imatge (ja sigui superior, inferior, esquerra o dreta) es poden tallar a les imatges, depenent dels valors que utilitzeu per a la propietat de posició de fons. Si orienteu el fons a "dalt a l'esquerra", es produirà un excés de la imatge als costats inferior i dret. Si centreu la imatge de fons, l'excés es desprèn de tots els costats, però com que aquest excés s'estengui, l'impacte en un costat serà menys servit.
Com utilitzar la mida del fons: cobrir;
Quan creeu la vostra imatge de fons, és una bona idea crear una imatge que sigui bastant gran. Tot i que els navegadors poden fer que la imatge sigui més petita sense un impacte notable en la qualitat visual, quan un navegador escalfa una imatge a una mida més gran que les dimensions originals, la qualitat visual es degradarà, es borrare i es píxelarà. El desavantatge d'això és que la vostra pàgina fa un toc de rendiment quan envieu imatges gegants a totes les pantalles.
Quan feu això, assegureu-vos de preparar correctament aquestes imatges per a la velocitat de descàrrega i el lliurament web . Al final, heu de trobar el mitjà feliç entre una mida i una qualitat d'imatge prou grans i una mida de fitxer raonable per a les velocitats de descàrrega.
Una de les maneres més habituals d'utilitzar imatges de fons d'escala és quan voleu que la imatge prenguin el fons complet d'una pàgina, ja sigui que la pàgina sigui àmplia i que es visualitzi en una computadora d'escriptori o sigui molt més petita i que s'envia a un ordinador de mà, mòbil dispositius.
Carregueu la vostra imatge al vostre amfitrió web i afegiu-la al vostre CSS com a imatge de fons:
background-image: url (fireworks-over-wdw.jpg);
background-repeat: no-repeat;
posició del fons: centre central;
adjunció de fons: arreglat;
Afegiu primer el navegador CSS prefixat:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
A continuació, afegiu la propietat CSS:
fons: tapa;
L'ús de diferents imatges que s'adapten a diversos dispositius
Tot i que el disseny sensible per a una experiència d'escriptori o portàtil és important, la varietat de dispositius que poden accedir a la web ha crescut de manera important i hi ha una gran varietat de mides de pantalla.
Com es va esmentar anteriorment, carregar una imatge de fons molt gran en un telèfon intel·ligent, per exemple, no és un disseny eficient o ample de banda.
Obteniu informació sobre com podeu utilitzar consultes de mitjans per mostrar imatges adequades als dispositius que es mostraran i millorar la compatibilitat del lloc web amb els dispositius mòbils.
Article original de Jennfier Krynin. Editat per Jeremy Girard 17/09/17