Dans le cours : L'essentiel des CSS

Accédez au cours complet aujourd’hui

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

Rendre les images responsive avec max-width

Rendre les images responsive avec max-width - Tutoriel CSS

Dans le cours : L'essentiel des CSS

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

Rendre les images responsive avec max-width

“

Un autre élément dont je dois pouvoir maîtriser la taille, c'est cette image que nous avons ici en plein milieu de notre texte. Cette image a une taille native. J'ai un certain nombre de pixels en hauteur et en largeur dans mon fichier jpeg. Cela dit, regardez ce qui se passe quand je modifie la largeur de ma fenêtre. Pour les écrans les plus étroits, ceux des smartphones, mon image n'a pas été redimensionnée, je génère ici une barre de défilement horizontal. Bref mon image n'est pas responsive. Alors où se trouve-t-elle cette image dans le code HTML ? La voici cette image, elle est ici en ligne 38. Et cette image, elle se trouve à l'intérieur d'un élément figure. Cet élément figure, c'est un élément de niveau bloc et vous savez que les éléments de niveau bloc ne sont jamais plus larges que la fenêtre du navigateur. Je vais profiter de ce comportement des éléments de niveau bloc. Regardez ce que je vais faire. Je vais aller dans ma feuille de…

Table des matières