Voici mon CSS que j'ai pour ma syntaxe img. Cependant, il doit être redimensionné de manière responsive lorsque le navigateur est redimensionné. Cela fonctionne dans Chrome, mais IE & FIREFOX pour une raison quelconque ne fonctionnent pas - y at-il une raison pourquoi? J'utilise le dernier de tous.Problèmes de redimensionnement des images en réponse
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
La img max-width: 100% est une bonne technique pour les images sensibles, mais il a besoin de travailler ensemble avec le conteneur d'image - élément qui contient l'image/elle enveloppe - pour que vous puissiez voir la réactivité en action.
Essayez et vous devriez le faire fonctionner les navigateurs cross:
<div class="imgHolder">
<img src="http://www.thoughtfeast.co.uk/wp-content/uploads/Big-Data-2-1024x522.jpg" >
</div>
Ainsi, votre image est enveloppé d'un div. Et le CSS serait:
.imgHolder{
width: 100%;
max-width: 1000px;
padding: 10px;
border: 3px dashed red;
margin: 10px auto;
}
.imgHolder img {
max-width: 100%
}
Vous pouvez vérifier les codepen here
Si le conteneur IMG n'est pas changer la taille, ni sera l'image. Il n'y a pas assez d'informations pour déterminer cela en fonction de ce qu'il y a dans votre question. –
Je n'ai jamais vu ou utilisé ce hack IE8 avant et mes images ont toujours bien fonctionné. –