Dans le cours : HTML : Les images responsive

Accédez au cours complet aujourd’hui

Inscrivez-vous aujourd’hui pour accéder à plus de 23 100 cours dispensés par des experts.

Utiliser la balise <picture>

Utiliser la balise <picture> - Tutoriel HTML

Dans le cours : HTML : Les images responsive

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Utiliser la balise <picture>

“

Explorons maintenant une autre situation et donc, un autre extrait de ma page web. Il s'agit de la bannière qui est constituée de cette grande image de bateau avec le titre du site en superposition. Allons voir à quoi ressemble cette bannière sur un appareil mobile. Clic droit > Inspecter et dans mes outils d'inspection, j'active ici le mode Device. Cela me permet de choisir l'appareil que je veux simuler, par exemple un iPad Pro, de choisir également l'orientation. Alors en orientation Paysage, eh bien, je suis satisfait de mon image. Je vois bien mon bateau, je vois le décor autour du bateau, ce bateau donc est mis en scène au sein de cette image. Je suis satisfait également de la disposition de l'image par rapport au texte : plus ou moins un tiers pour l'image, deux tiers pour le texte, tout va bien. Passons à l'orientation Portrait. Alors là, je ne suis plus du tout satisfait de mon image. Mon bateau est coupé ici sur l'arrière. Étant donné que j'ai moins d'espace disponible…

Table des matières