Liquid Layout out of Proportion
J'utilise une présentation liquide sur mon site Web, mais lorsque je vois dans mon navigateur, je constate que lorsque je modifie la taille de la fenêtre du navigateur, les images sont étirées de manière disproportionnée. Quelqu'un peut aider?
Dans votre CSS, assurez-vous que pour chaque image, sa width ou height (généralement la hauteur qui convient) est auto (la valeur par défaut) plutôt qu'une valeur spécifique. Cela entraîne le calcul de la hauteur (ou de la largeur) en fonction de l’autre dimension et du format de l’image. (Référence: CSS 2.1 section 10.6.2 )
Par exemple, si vous déclarez max-width: 100%; height: auto; pour une image, celle-ci ne sera pas plus large que la zone/la colonne dans laquelle elle se trouve et sera mise à l'échelle verticalement pour correspondre à la mise à l'échelle horizontale. C'est ce que fait Stack Exchange avec les images que vous incluez dans les questions et les réponses.
Vous devriez fournir un lien de test.
Quoi qu'il en soit, vos images doivent avoir une largeur et une hauteur fixes et ne doivent pas changer leurs proportions lorsque vous modifiez la taille de la fenêtre.
Après une réduction excessive de la taille de la fenêtre, toute la structure deviendrait un désastre. Mais c'est quelque chose d'inévitable pour autant que je sache.
Vous pouvez utiliser le javascript avec beaucoup de fantaisie et fournir plusieurs images pour les étapes de tailles ou de réductions de taille intelligentes avec l'échantillonnage bicubique, etc. Vous ne pouvez pas simplement redimensionner des images raster sans perte de qualité épique.