Comment respecter la proportion des images dans un slider flexible?

Bonjour, je suis entrain de mettre en place, un slider a largeur flexible, simplement avec des un largeur en %, la hauteur est fixée.
Le Conteneur a le code suivant

width:80%

L'image a le code suivant

max-width:100%;

Dans ce cas ci, quelle taille dois-je donner aux images, ou comment les traiter à l'avance, pour qu'elles gardent ses proportions (elles doivent occuper tout l'espace du conteneur) même après un resize de la fenêtre ou avec différentes résolutions?

Autant avec les sprites css on peut les repeat, mais avec un image on ne peut pas.
Comment puis-je respecter pour autant ses proportions malgré les redimensionnement du navigateur ou les différents viewports?

Salut,

On parle bien d'un genre de carousel ?

Si oui, tout dépend de ce qui est prioritaire pour tes images. Tu as un problème de fond, dans la mesure où les proportions de conteneur varient, alors que les proportions de tes images sont fixes. Tu peux donc soit faire un crop (on enlève le bout d'image qui déborde), soit déformer l'image, soit laisser un fond neutre là où l'image ne remplit pas le conteneur. En gros, tu as trois solutions :

1. Les images peuvent être resizées en hauteur (image déformée) - dans ce cas, on a :

  height: 100%;
  width: 100%;
  display: block;

2. Les images prennent la hauteur et flottent au milieu d'un fond noir. Dans ce cas on a :
wrapper

  
  height: 100%;
  width: 100%;
  background: #000;

et image

  
  height: 100%;
  width : auto;
  margin-left: auto;
  margin-right: auto;
  display: block;

3. Les images prennent la largeur et les morceaux qui débordent sont coupés :
wrapper

  height: 100%;
  width: 100%;
  overflow: hidden;

et image

  height: auto;
  width : 100%;
  display: block;

Evidemment, l'autre possibilité, c'est de rendre ton conteneur entièrement responsive : c'est-à-dire d'avoir la hauteur qui s'adapte à la largeur. Si tu veux partir sur cette solution il se trouve que j'ai une petite librairie qui s'occupe de ça : https://github.com/web-education/criss-cross
Modifié par niphra (02 May 2014 - 14:48)

Bonjour dqniel,

Si cela peut vous inspirer :

Le plugin jQuery http://bxslider.com/ mixe le CSS et le JS pour obtenir un carrousel responsive. Au redimensionnement de la fenêtre, il recalcule automatiquement la taille des images, proportionnellement, en fonction de leur largeur ou hauteur fixée. Il est extrêmement stable, tant sur PC que sur mobile.

Bonne journée et bon code...

Je commencerais avec :

conteneur {
width:80%;
text-align:center;
}
img {
max-height:100%;
maw-width:100%;
}

Histoire de garde l'image dans son conteneur ... mais ce conteneur à t-il une hauteur déterminée ?

Avec le peu d'infos que tu donnes, on ne peut que te renvoyer sur un slider déjà existant et responsive .

Merci à tous pour vos réponses!

Le seul point obligatoire est que l'image prenne toute la largeur.

Actuellement l'image n'est pas déformée, c'est bien la dernière chose que tout designer veut.
Elle garde bien évidement sa proportion, et puisqu'elle prend 100% de width du conteneur, c'est sa hauteur qui pose problème, elle est croppée car le conteneur a un

overflow:hidden

.

La hauteur du conteneur est fixée, mais le fait de pouvoir modifier sa hauteur pourrait etre une bonne solution, mais la cohérence du site n'en prendrait t'elle pas un coup?
Les images étant différentes on aurait une adaptation de la hauteur du conteneur différente également ce qui pourrait être perturbant?...

La solution la plus viable, est effectivement de mettre un fond de couleur au conteneur , et d'apporter le contenu des image (ce n'est cependant pas toujours possible) en html, de là, on peut adapter facilement les tailles...

Je vais jeter un oeil a la librairie et au plug-in, et merci encore!