Conception réactive: différentes images pour différentes tailles d'écran
Notre client veut avoir une autre image de la bannière sur des écrans plus petits que sur les grands écrans. Pas simplement rétractable/étirer pour s'adapter, mais le fait de substituer une image différente. L'image plein taille est assez complexe -- plusieurs personnes, deux logos, et des éléments de décor du texte -- et donc, pour la petite image qu'ils veulent rogner quelques personnes, déposer les logos, etc. Ils veulent donc le plus grand, le plus complexe de l'image pour les ordinateurs de bureau, d'un petit plus simple de l'image pour la mi-taille des appareils, puis les plus petits et encore plus simple pour les plus petits.
Quelle est la meilleure façon de le faire?
Ma première pensée est pour inclure tous les trois images, et l'utilisation de @media min/max largeur à faire deux d'entre eux, invisible à tout taille. Comme:
@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px) { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px) { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }
Cela devrait fonctionner, mais il serait de télécharger tous les trois images à chaque fois, ce qui semble plutôt un gaspillage de bande passante.
Je pouvais changer les images à partir des balises img css images d'arrière-plan. Serait-ce mieux? Serait-évitez de télécharger tous les trois ou serait-il encore le faire?
Je pensais à écrire du JavaScript pour mettre à jour dynamiquement l'URL dans la balise img basé sur la taille de l'écran, mais ça semble être un tas de complexité.
J'ai brièvement pensé à faire le logos et le texte des images séparées et de casser l'image réelle en morceaux et puis d'essayer de les assembler de toutes les images qui se chevauchent. Mais cela ressemble à beaucoup de travail pour obtenir le droit, et puis j'aurais à assurez-vous qu'il regarde, à droite, à tous les possibles de tailles, pas si facile de simplement rétractable ou extensible, etc. Et tandis qu'il est probablement possible dans ce cas particulier, je préfère une solution générale que je peux utiliser dans l'avenir.
Quelqu'un fait quelque chose comme cela et d'avoir quelques idées sur la meilleure façon de le faire?
source d'informationauteur Jay
Vous devez vous connecter pour publier un commentaire.
vous pouvez utiliser les css
background
dansmedia queries
. Les images ne sont chargés que si le CSS pour cela il faut, donc, si rien ne correspond au sélecteur, il ne dérange pas le chargement de l'image.Cette article va sûrement vous aider.
Je voudrais caisse Zurb Foundation d'Échange pour la manipulation des images responsives. Le meilleur navigateur que j'ai trouvé.
http://foundation.zurb.com/docs/components/interchange.html