Responsive webdesign et images de contenus en CSS

Responsive webdesign et images de contenus en CSS (le 30 mars 2014)

Sur un des sites que je viens d’intégrer, Vision Clinique pour ne pas le citer, j’ai eu le plaisir d’essayer quelques techniques pour améliorer l’utilisation des images sur un site en responsive, grâce à une discussion partie de rien avec mon graphiste. On appelle cela Art Direction for images en anglais.

Au début sur la page d’accueil, j’avais intégré l’image en width: 100%, l’image étant de taille assez conséquente (1600 pixels de large), elle s’adaptait tranquillement à la largeur de la fenêtre, en respectant les proportions de l’image, et point barre.

Mon graphiste me fait la remarque que sur son énorme écran de graphiste, quand il redimensionne, la zone de contenu est toute entassée en haut de l’affichage. Je remarque que le « problème » est également le même sur l’iPad en portrait. Autant son écran énorme en vision colonne me parait être un cas peu probable (ces graphistes… :) ), autant sur l’iPad… là je suis plus gêné. Il me fait remarquer au passage que le cadrage sur l’oeil n’est pas fameux, comme vous pouvez le voir sur cette capture d’écran. Gênant vu le sujet du site !

Vision Clinique en iPad en portrait avant retouche

On commence à chercher une solution pour améliorer cela. Je refuse d’entrée de jeu de commencer à rentrer dans le jeu « on fait une image dans tel cas, etc. » : on a une image de contenu, elle est suffisamment grande, hors de question de pourrir un code nickel avec des chargements en JavaScript. La solution sera en HTML/CSS sinon rien. Comme je l’ai dit plus haut, c’est une image de contenu, et je souhaite qu’elle le reste, ne serait-ce que pour la version imprimable (impossible de se reposer sur une image de fond CSS pour une version imprimable).

Je me dis : puisque c’est la largeur de l’image qui contrôle le tout, autant jouer dessus !

Le premier essai pour contrer le problème sur l’iPad donne ceci :

/* fait avec Sass pour le em(), à transposer en CSS */
@media (max-width: em(1024)) and (orientation:portrait) {
/* home */
.home-img-bg {
min-width: 190%;
margin-left: -50%;
}
}

Autrement dit, j’empêche l’image de se réduire drastiquement, et je la décale juste ce qu’il faut pour que le cadrage soit meilleur. C’est bien mieux !

Vision Clinique en iPad en portrait après retouche, avec code CSS affiché

Seul souci, vu que j’augmente la largeur de cette image, cela fait apparaître un ascenseur (scroll) horizontal. Impossible et hors de question. La solution sera tout aussi simple : ajouter un overflow: hidden sur le conteneur parent de l’image, comme l’indique la capture d’écran suivante.

Vision Clinique en iPad en portrait après retouche, avec code CSS affiché (overflow: hidden))

Bref, je passe les détails de mise au point (j’ai tâtonné pour trouver les bonnes valeurs, il faut juste faire quelques essais, je les ai souvent adaptées selon les résolutions), mais c’est assez simple à comprendre et à mettre en œuvre. Jouer sur le min-width permet de bloquer ou gérer le redimensionnement automatique de l’image quand la fenêtre se réduit, cela vous permet à peu près toutes les fantaisies de cadrage, à moindre coût, autant en CSS qu’en image. Simple et élégant.

J’ai d’ailleurs déjà réutilisé cette technique sur un autre site en cours d’intégration, pour résoudre quelques problèmes de contenus selon la résolution. Dans ce cas, au lieu d’utiliser un min-width en pourcentage, je l’ai mis dans une valeur fixe en pixel, ce qui évite de la réduire en taille.

Du coup, je me dis qu’on peut s’amuser en CSS mais sur des images de contenu, ce qui reste agréable !

Si vous avez d’autres techniques ou idées dans le genre, n’hésitez pas à les partager.

Ajout : apparemment, Internet Explorer 11 fait quelques bizarreries dans certains cas, j’ignore encore pourquoi, mais il semble qu’il ignore le min-width, en doublant d’un width avec la même valeur, le problème se résout tout seul.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1621

2 commentaires

Posté par Salon Virtuel le 09/06/2016 à 14:22:03
bonjour je souhaiterais savoir si il est possible de mettre une image fond d'ecrant responsice compatible avec firefox
Posté par Nico le 09/06/2016 à 14:25:08
Si c'est une image de fond, faut regarder du côté de background-size: cover et consorts. Sinon, ce que j'ai utilisé marche très bien sur Firefox.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.