1484 sujets

Web Mobile et responsive web design

[Résolu] Adaptation auto d'une image en largeur ne fonctionne pas sur

Bonsoir,
Je n'arrive pas à rendre responsive des images contenues dans un bandeau horizontal. Par exemple ça fonctionne bien sous Firefox, mais pas sous Chrome : la taille des images ne varie pas quand la fenêtre se réduit.
Le css qu'on utilise le plus souvent pour qu'une image se redimensionne automatiquement selon le viewport est :

img {
   max-width: 100%;
   height: auto;
}

Mais moi je voudrais faire le contraire : fixer la hauteur des images à 100% de celle du bandeau horizontal qui les contiennent, et que la largeur de l'image s'adapte automatiquement.
J'ai essayé :

    width: auto;
    max-height: 100%;

ou aussi :

   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;

ça fonctionne avec Firefox, avec WinPhone mais pas avec Chrome, ni avec d'autres navigateurs, lorsque je teste sur MobileTest.me, par exemple.
J'ai pourtant bien défini les hauteurs et largeurs des div parents.
Voici la partie de mon code concernée, si quelqu'un peut m'aider :
- le CSS :


html, body {
	width: 100%; height: 100%;
	margin: 0; padding: 0%;
	text-align: center;
	font-size: 62.5%;
	display: table;
} 
body {
	background-color:#D0F5A9;
	display: table-cell;
        vertical-align: middle;
	font-size: 15px; font-size: 1.5rem;
	font-family: Verdana, Serif; 
}
.conteneur_arrow {
	margin: 0 auto;
	width: 82%; height: 18.5%;
	background-color: #A4A4A4;
}
.img_menu {
	display: inline-block;
	width: auto;
        max-height: 100%;
	margin-left: 5%; margin-right: 5%; margin-top: 0.3%;
}


- Le HTML :


<body>
<div class="conteneur_arrow">
	<img class="img_menu" src="imgs/image1.png" border="0" />
	<img class="img_menu" src="imgs/image2.png" border="0"  />
	<img class="img_menu" src="imgs/image3.png" border="0" />
	<img class="img_menu" src="imgs/image4.png" border="0"  />
</div>

Modifié par Thomas237 (03 May 2016 - 23:03)
Bon, finalement j'ai trouvé pourquoi ça ne marchait pas sur certains navigateurs (la plupart en fait, à part Firefox et WinPhone). Si ça peut servir à d'autres :

- D'abord, je suis obligé de supprimer display: table et display: table-cell dans le body, qui me servait à centrer toute la page verticalement dans le viewport car ça empêche le redimensionnement des images ... pourquoi ? je ne sais pas
- Ensuite il faut indiquer la taille initiale de l'image dans le HTML :

<img class="img_menu" src="imgs/image1.png" width="90" height="112" />

Sinon les images se redimensionnent, mais les proportions ne sont pas conservées.
Bizarrement quand on veut faire le contraire : fixer une hauteur auto, ça marche même si on n'indique pas la taille des images dans le HTML ...
Sujet clos
Aller à