imax est un élément div.force css pour afficher l'image avec ratio-aspect
#imax {
width:222px;
height:222px;
}
#imax img {
width:222px;
height:auto;
}
si de toute façon j'ai essayé automatique de la largeur ou de la hauteur, les images ayant une orientation différente se traduira par Déformer soit l'échelle. Comment est-ce que j'ai pu corriger pour afficher avec ratio-aspect?
Ne peut pas être fait avec CSS seulement.
Vous pouvez utiliser Javascript pour ce faire: Obtenez soit la hauteur ou la largeur de l'image en taille réelle, puis calculer la bonne taille plus petite.
Laissez la hauteur:
#imax img {
width:222px;
}
Et le navigateur prendra en charge le calcul du ratio d'aspect.
L'image est déformée car vous mettez des restrictions sur son parent. Si vous spécifiez un seul des attributs de taille, l'autre doit être mis à l'échelle en fonction des proportions, à moins qu'il ne soit limité/affecté par son conteneur. Peut fonctionner différemment si vous utilisez la hauteur/largeur maximale sur le conteneur
mais l'image portrait se chevaucherait vers le bas. – proyb2
Vous devrez décider quelle direction vous voulez corriger. Si vous voulez que la hauteur soit fixe, alors vous réglez la hauteur, mais laissez la largeur. –