Comment utiliser HTML5 Élément pour obtenir une image réactive

Responsive Design est peut-être là pour rester mais il y a beaucoup de problèmes qui doivent être résolus quand il s'agit de rendre les images sensibles . Bien que les images responsives se redimensionnent automatiquement en fonction de la taille de la fenêtre (ce qui est techniquement facile), un des problèmes rencontrés par les utilisateurs est que le point vocal de l'image devient à peine visible lorsque l'image devient trop petite .

Le consensus idéal parmi les développeurs Web est que la dimension réelle devrait également être réactive . Le navigateur doit pouvoir charger des images plus petites ou plus grandes en fonction de la taille de la fenêtre. De cette façon, nous pouvons diriger et fournir la meilleure proportion d'image plutôt que l'image rétrécie (comme indiqué).

C'est là que l'élément d' picture HTML5 entre en jeu. L' picture nous permet de fournir plusieurs sources d'images et de contrôler la diffusion via les requêtes média. Bien qu'il n'y ait pas encore de navigateur implémentant cet élément, nous pouvons utiliser un polyfill appelé Picturefill pour cela. Voyons voir comment c'est fait, allons-nous?

Commencer

Picturefill est une bibliothèque JavaScript développée par Filament Group. Cela nous permet d'utiliser l'élément d' picture maintenant. Pour commencer, téléchargez le script dans le référentiel Github et placez le picturefill.js ou picturefill.min.js . Picurefill est une bibliothèque JavaScript autonome qui ne nécessite aucune autre bibliothèque pour fonctionner. Vous pouvez simplement l'ajouter dans l'étiquette de head .

L'image

J'ai préparé une image dans trois dimensions différentes, comme suit. L'image a été recadrée pour conserver le focus sur la personne dans l'image. Le plan ici est que nous allons montrer la plus petite taille dans les petits écrans et la plus grande image dans les grands écrans.

Utilisation de l'élément d'image

Picturefill peut fonctionner de deux façons: nous pouvons intégrer srcset dans la balise img ou utiliser l'élément d' picture . Ici, nous allons opter pour l'élément d' picture car il est plus facile à gérer, plus facile à comprendre et plus lisible.

Similaire aux éléments video et audio, l' picture enveloppe des éléments source multiples pointant vers la source de l'image, comme suit.

L'élément source, comme vous pouvez le voir dans l'extrait de code ci-dessus, est défini avec media attribut media . Dans cet attribut, nous spécifions le point d'arrêt de la fenêtre sur laquelle l'image doit être présentée. Vous pouvez voir l'effet immédiatement.

Consultez la page de démonstration, et redimensionnez la taille de la fenêtre, vous devriez trouver l'image affichée dans la largeur de la fenêtre spécifiée.

Picturefill pour WordPress

Si vous utilisez WordPress, vous pouvez utiliser un plugin appelé Picturefill.WP qui vous permet d'implémenter l'élément d'image dans WordPress, sans les tracas. Il suffit de télécharger et d'intégrer votre image comme d'habitude, et ce plugin s'occupera du reste.

Pensée finale

L'élément d' picture est un excellent ajout en HTML5. Nous avons plus de contrôle sur la taille de l'image et la dimension que le navigateur devrait présenter. Et avec picturefill, nous pouvons utiliser ce nouvel élément même si aucun navigateur ne l'a encore implémenté. Picturefill fonctionne dans un large éventail de navigateurs, y compris dans IE (mais avec quelques mises en garde).

Enfin, voir la démo et télécharger le code source ci-dessous.

• Démo
• Source de téléchargement

Freelancers historiques qui ont changé le monde - Partie 2

Nous avons déjà parlé de Ray Kroc, de Walt Disney, d'Alfred Nobel, d'Ernest Hemmingway et de Charles Dickens et de la façon dont ils ont été quelques-uns des freelances historiques qui ont changé l'environnement dans lequel ils sont nés. que la vie, en bougeant et en secouant la vie des millions avec leurs inventions, leurs idées d'affaires et leur vision, en travaillant en freelance.Plutôt q

(Conseils techniques et de conception)

Un cours intensif sur l'Internet des objets

Imaginez un monde où tout n'est pas seulement connecté, mais aussi automatisé . Un monde avec un collier pour animaux de compagnie qui vous permet non seulement de savoir où se trouve votre chien, mais aussi de le savoir grâce à votre smartphone si votre compagnon a faim, dort ou est malade. Un m

(Conseils techniques et de conception)