Toutes les images "affichées" proportionnelles sans les défo

Bonjour,

Depuis très longtemps un problème me perturbe, sur mes sites quand les utilisateurs insert des images, on arrive à avoir des galeries complètement disproportionnelles du fait que les photos n'ont pas toutes les même dimensions, existerai il une méthode en CSS qui nous permettrai de mettre toutes les images aux mêmes dimensions même si elles ne le sont pas à la base, attention je ne veux pas déformer mes images en forcent un width ou height.

Merci d'avance
Modifié par evdog69 (25 Jul 2011 - 16:51)

Y'a plusieurs méthodes, soit au moment de l'upload soit à l'affichage, ou encore en combinant les deux. Mais sans voir ce que tu as actuellement et ce que tu souhaites obtenir on ne risque pas de t'aider.

Justement je ne veux pas passer par le uploade, je veux laisser la photo dans sa taille initial tel que l'utilisateur l’avait uploadé, c'est au niveau de l'affichage que je veux les mêmes hauteurs et largeur, même si une photo n'est pas entièrement affichée, quand tu aligne les photos dans des tableaux elles ont toutes la même taille et c'est bien plus jolie à regarder.
Modifié par evdog69 (25 Jul 2011 - 16:52)

si tu met ton image dans une div avec un overflow:hidden ?

c'est pas mal du tout, domage que je ne puisse pas rendre les images proportionnelles à la dimension du div

En gros ce que tu veux c'est : le beurre et l'argent du beurre.

Donc 2 possibilités :

- Tu continuer à rêver.
- Tu fais un choix.

tu peux rajouter un max-height/max-width pour ajuster les tailles.

Ah ouais c'est pas bête. Raphaël avait une démo avec un max-width sur une image mais je me souvient plus où.

bonjour,

ou tu acceptes un compromis a l'aide d'un max-width/height au dimension du div.

En solution tordue, tu éjectes la photos en text-indent négatif et tu appliques la même image en background au div avec un background-size.

Ces propositions sont limités aux navigateurs les plus recents
ex avec background-size et text-indent négatif :

<div id="un"><img src="http://lorempixum.com/430/250/sports/2/Surf%20the%20wave/" alt="surf the wave" />
</div>
<div id="deux"><img src="http://lorempixum.com/230/100/sports/1/hit%20the%20ball/" alt="shit the ball" /></div>

body {text-align:center;background:#333}
div {display:inline-block;width:200px;height:100px;overflow:hidden;text-indent:-9999px;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
/* make up : pour le border radius qui passe vu l'absece de l'image a l'ecran */
background-color:#777;
border:#aaa solid;
border-radius:15px;
box-shadow:0 0 5px 2px #ccc;
margin:0.25em;}
#un {background-image:url(http://lorempixum.com/430/250/sports/2/Surf%20the%20wave/);
}
#deux {background-image:url(http://lorempixum.com/230/100/sports/1/hit%20the%20ball/);}

En s'appuyant sur le script serveur , on peut placé l'image de fond via la balise style du div .... du coup on peut imaginer redimensionné l'image coté serveur et placé un lien vers l'image originale et se faire plaisir avec un lightbox ou similaire sans en passer par un background-size ni text-indent négatif. (je le chuchote mais je dis rien )

Cordialement, GC