Meilleure façon de redimensionner automatiquement les images mantaning ratio d'aspect?

Question

J'utilise ce code pour Redimensionner automatiquement les images à la taille de la fenêtre sur une page mobile:

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

Mon intention est de montrer l'image dans la bonne taille de la fenêtre sur les petits écrans et max 480px sur de plus grands écrans maintenir le ratio.

Mais pour une raison quelconque, je ne sais pas quand j'utilise ce code, le texte autour de l'image va derrière.

Est-il possible d'obtenir ce résultat en utilisant une autre méthode comme Java ou Jquery et d'éviter ce problème?

Answer 1

Si vous faites cela pour les appareils mobiles, je recommanderais le redimensionnement du serveur pour économiser la taille du téléchargement. En ce qui concerne le texte qui suit, avez-vous un test plus complet montrant le document auquel cette CSS s'applique?

Answer 2

J'ajouté ce code dans ma page et il travaille:

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

Answer 3

Vous vous retrouverez avec des images Squished si vous faites cela. Je pense que cela donne le meilleur résultat que vous pouvez obtenir avec CSS:

#content img { 
    width: 100%; 
    height: auto; 
    max-width: 480px; 
} 

Answer 4

Avez-vous essayé d'utiliser des feuilles de style différentes pour différentes tailles d'écran? Ensuite, vous devrez juste écrire le code pour chaque situation, puis charger le style nécessaire. Il serait également utile si vous avez d'autres styles qui ont besoin de changer en fonction de la taille. Très utile sur les sites mobiles.

<meta content="width=device-width, initial-scale=1.0" name="viewport"> 

permet de s'assurer qu'il est bien équilibré. Je ne sais pas à quel point ce sera utile, mais j'espère que ce lien sera utile.

CSS trick for specific style sheet

J'ai aussi joué un peu, et il semble fonctionner si vous définissez l'image en pourcentage. J'ai flotté un à gauche du texte et à 50% de l'écran et il a redimensionné le texte et tout. Si vous avez besoin de moi pour poster un exemple, il suffit de demander.

Answer 5

utilisez @media pour effectuer des modifications manuelles en fonction de la taille du portable, de la tablette ou du bureau. par la façon mobile et tablette aura paysage et portrait. Si vous utilisez Google Chrome pour vérifier, vous pouvez le déterminer mieux. exemple de site Web: Media Queries: How to target desktop, tablet and mobile?