Bonjour, la question parait stupide mais j'ai longtemps cherché sans trouver de réponse.

Je souhaite redimensionner une image avec un pourcentage en fonction de sa taille et non en fonction de la taille de l'écran.

J'explique pourquoi je ne peux faire autrement:

J'ai une quinzaine d'image qui respectent entre elles les bonnes proportions, or si j'utilise width: (valeur)px ou width: (valeur)% toutes mes images auront la même largeur donc pour une image très fine mais longue elle fera tout l'écran alors qu'à l'inverse une image quasiment carré sera miniscule.

Je risque de modifier ou ajouter des images, c'est pourquoi je souhaite appliquer le même style à toutes mes images, d'autant plus qu'à terme j'aimerais passer par une boucle php pour afficher les images au lieu de mettre 15 balises img, alors j'aurais besoin d'un style commun.

Merci pour vos réponses !

edit: Je pense pouvoir régler le problème en mettant le height en pourcentage au lieu de width, ça ne sera plus proportionnel mais au moins ça aura une taille acceptable, mais lorsque que j'écris height: 10%; ou max-height: 10%; mon image garde sa taille d'origine, je ne comprend pas pourquoi puisqu'avec la même syntaxe sur le width ça fonctionne !

re-edit: J'ai donné une hauteur en pixel au div contenant les image et maintenant je peux donner un pourcentage à la hauteur des image.

Bon maintenant le problème c'est que je suis obligé d'exprimer la hauteur du div en pixels, et donc je ne peux pas le faire proportionnel aux dimensions de la fenêtre pour éviter que les images s'étendent sur 3 lignes au lieu de 2 quand je rétréci ma fenêtre !

-
Edité par DCAdrien 8 mai 2017 à 15:37:00

<div class="container-photo">
<div class="photo">
<img src="ma-photo.jpg"/>
</div>
</div>

.container-photo
{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.ma-photo
{
width: /* largeur en PX de ta div photo !! pas de la photo !! */ ;
min-width: /* la largeur minimum = à la hauteur en PX de ta div photo !! pas de la photo !! */ ;
height: /* la hauteur en PX de ta div photo !! pas de la photo !! */;
overflow: hidden;
display: flex;
align-items: center;
}
.ma-photo img
{
width: 100%;
}

En gros il va te falloir une div d'encadrement, et une pour ta photo à l'intérieur.

Essai ça, je n'ai pas essayé mais ça devrait le faire. ( si j'ai bien compris ce que tu souhaite )

-
Edité par FloJDM 9 mai 2017 à 11:35:01

Ça marche comme ça merci beaucoup ! J'ai juste du retirer le overflow: hidden sinon les images qui sont plus longues que larges sont coupées ! (ce qui fait que j'ai aussi enlevé les width, min-width et height)

Si je veux que mes images s'affichent sur deux lignes au lieu d'une je dois les séparer en deux div container je suppose ?

Et j'en profite pour poser une autre question pour ne pas devoir créer un autre sujet, j'aimerais que ma box-shadow embrasse les contours de mon images au lieu de l'entourer comme un rectangle (je veux dire que le contour n'englobe pas les zones transparentes), comment puis-je faire une telle chose s'il vous plait ?

-
Edité par DCAdrien 8 mai 2017 à 16:11:00

Bonjour,

à propos de width et height :

Tous les supports sur lesquels on consulte des sites web ont deux dimensions, la largeur (width) et la hauteur (height).

Pour des écrans à largeur réduite (exemple: smartphone, etc...), l'affichage des éléments est naturel (c'est-à-dire en hauteur (height)) sans avoir besoin d'une mise en forme en css. Pour des écrans plus larges, l'affichage des éléments n'est pas naturel (donc en hauteur) mais s'effectue plutôt en largeur (width), et si on veut afficher les éléments en hauteur (height), il faut une mise en forme en css.

Mais, puisqu'une mise en forme sur la hauteur est naturelle sans avoir besoin de css alors que l'affichage en largeur n'est pas naturelle, il est plutôt déconseillé d'utiliser la propriété css "height", mais plutôt laisser les blocs prendre la hauteur en fonction des éléments enfants. Il vaut mieux jouer sur la largeur avec la propriété width.

Un exemple bien parlant : une photo, même si la balise img est de type inline et pas de type block. Tous les écrans ont une certaine largeur. Si on veut que la photo fasse 100% de largeur, même pour des grands écrans, c'est "faisable", car un site s'affiche toujours en hauteur et jamais en largeur. Mais si on veut que la photo fasse 100% de la hauteur et qu'il s'agit d'une page avec beaucoup de contenu, l'image sera horriblement déformée, surtout sur des appareils à largeur réduite où l'affichage s'effectue sur la hauteur.

Tout ça pour dire qu'il vaut mieux ne jamais utiliser la propriété height tant qu'il est possible de l'éviter, mais utiliser plutôt la propriété width et laisser le navigateur adapter la hauteur en conséquence en fonction des éléments enfants d'un bloc.

Si tu veux que tes images s'affichent sur plusieurs lignes, tu à deux solutions, tu peut séparer par des blocs de div comme tu le dis, ou alors faire avec des dimensions, si ton body fait 1170px de large et que tes images font toutes 300X300 par exemple cela ce fera automatiquement avec la mise en page Flex.

D'ailleurs si tu ne connait pas très bien Flexbox, je t'invite à regarder le cours de Mathieu Nebra dispo sur le site 

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Tu pourras y trouver beaucoup de méthodes pour des mise en page très rapide et des explications plus précises sur ta questions pour les mise en page sur plusieurs lignes.

Pour ta deuxième question je n'arrive pas trop à visualiser le truc, tu a peut être une photo d'exemple as nous montrer ?

-
Edité par FloJDM 9 mai 2017 à 11:45:34