28172 sujets

CSS et mise en forme, CSS3

Image responsive crop puis resize

Bonjour à tous,

J'essaye de mettre en place en vain le comportement CSS suivant

Soit une balise <IMG> d'une taille de 1920 x 500 px :

1/ de 1920 px -> 960 px elle doit être centrer et sans redimensionnement (facile ! Smiley cligne )
2/ de 960 px -> 0 px elle doit se redimensionner proportionnellement tout en conservant le fond perdu

J'ai fait un schéma du comportement recherché (en espérant que ce soit plus clair) :
upload/59909-home.png

Est-il possible de réaliser ce comportant selon (surtout le point 2) ? Et si oui comment ?

D'avance mille mercis Smiley cligne
Modifié par dasys (09 Dec 2015 - 16:24)
Salut,

Bien sûr que cela est réalisable, il faut passer par les media queries en CSS,

un tuto très utile ici
Merci JENCAL pour ton message Smiley cligne

J'avais l'intention d'utiliser les media queries pour gérer le changement de comportement en dessus de 960px.

Le point sur lequel je butte vraiment est le point 2/ : redimensionner l'image proportionnellement en tenant compte du fond perdu à conserver (voir mon "magnifique" schéma).
Bonsoir,

si l'idée est de garder le ratio de l'image, au premier abord je dirais : max-width:100%;

Si ce ratio dépend d'un conteneur , plutôt , alors un positionnement absolu dans un conteneur dont le ratio est préserver est peut-être une soluce. http://codepen.io/anon/pen/KVpWZM

enfin, si l'image doit tenir dans la hauteur de la page, max-width et max-height:100vh ; est peut-être aussi une solution. http://codepen.io/anon/pen/RrPpyd

... hmm , j'ai zappé le crop: alors ce serait plutôt ceci http://codepen.io/anon/pen/gPpmdV ( une marge négative de -50 à xx % selon la largeur initial de l'image et l’écran le plus petit visé .)
Modifié par gc-nomade (10 Dec 2015 - 01:32)
Un grand merci gc-nomade ! Smiley cligne

Le comportement recherché n'est pas facile à décrire mais voici ce qui s'en rapproche le plus :
http://codepen.io/dasys/pen/eJNGYV

A partir de 960px, on arrête de recadrer l'image pour la redimensionner.

Le problème est que mon code ressemble plus à de la bidouille car il fonctionne à peu près à condition que la ratio du view port soit de 16/10.

L'objectif - ou le "graal" Smiley cligne - serait qu'à partir du query 960px l'image se redimensionne proportionnellement de manière centrée *et* en gardant visible 960px de l'image naturelle.

Croyez-vous que ce soit possible ?

D'avance mille mercis !
Modifié par dasys (10 Dec 2015 - 09:02)
okay, y'avais du flex dans l'air Smiley smile

en fait il te faudrait faire un reset sur l'item en flex avec : flex:none; et un margin:auto; pour le centrage http://codepen.io/anon/pen/MKwVpd en fait pour IE il faut quand même encore en passer par les marges latérales négatives, histoire de donner une largeur virtuelle de zero ou null a l'image. http://codepen.io/anon/pen/OMVvjv

<edit> suite a la reponse d'olivier, je m'aperçois qu'une véritable image est plus utile et que en fait, l'image prend une taille maxi de 200% a partir de 960px et en dessous : http://codepen.io/anon/pen/VevWVb
Pour le display:flex, je n'en saisi pas vraiment l'utilité.
Modifié par gc-nomade (13 Dec 2015 - 00:42)
Sujet clos
Aller à