HTML img mise à l'échelle
J'essaie d'afficher de grandes images avec des balises HTML img. Au moment où ils sortent du bord de l'écran; Comment puis-je les redimensionner pour rester dans la fenêtre du navigateur?
Ou, dans le cas probable où cela ne serait pas possible, est-il possible au moins de dire "afficher cette image à 50% de sa largeur et de sa hauteur normales"?
Les attributs de largeur et de hauteur déforment l'image - pour autant que je sache, c'est parce qu'ils se rapportent à tous les attributs avec lesquels le conteneur peut aboutir, qui ne seront pas liés à l'image. Je ne peux pas spécifier de pixels car je dois gérer une grande collection d'images, chacune avec une taille de pixel différente. Max-width ne fonctionne pas.
Ne définissez que width ou height, et l’autre sera automatiquement redimensionné. Et oui, vous pouvez utiliser un pourcentage.
La première partie est réalisable, mais nécessite JavaScript, ce qui pourrait ne pas fonctionner pour tous les utilisateurs.
En regardant la référence W3 Schools pour le tag img , vous devriez pouvoir faire quelque chose comme:
<img src="img.jpg" width="50%" height="50%"/>
Pour une mise à l'échelle automatique via Javascript, consultez cette astuce
css est suffisant:
width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
Pas de Javascript requis.
IE6 Internet Explorer 6
Le pourcentage ne fonctionne que pour la largeur d'un élément, mais height:100%; ne fonctionne pas sans le code correct.
CSS
html, body { height:100%; }
Ensuite, utiliser un pourcentage fonctionne correctement et met à jour dynamiquement le redimensionnement de la fenêtre.
<img src="image.jpg" style="height:80%;">
Vous n'avez pas besoin d'un attribut width, la largeur est proportionnelle à la taille de la fenêtre du navigateur.
Et ce petit bijou, au cas où l'image serait agrandie, elle n'aura pas l'air (trop) bloc (il interpole).
img { -ms-interpolation-mode: bicubic; }
Les accessoires vont à cette source: ltimate IE6 Cheatsheet: Comment réparer plus de 25 bugs Internet Explorer 6
Ajouter max-width: 100%; à la balise img fonctionne pour moi.
Je pense que la meilleure solution est de redimensionner les images via un script ou localement et de les télécharger à nouveau. N'oubliez pas que vous obligez vos téléspectateurs à télécharger des fichiers plus volumineux qu'ils n'en ont besoin
La meilleure façon de le faire est:
1) paramétrez le débordement pour faire défiler et ainsi l'image resterait mais vous pouvez faire défiler pour la voir à la place
2) télécharger une image plus petite. Maintenant, il y a beaucoup de programmes disponibles lors du téléchargement (vous aurez besoin de quelque chose comme PHP ou .net pour le faire), vous pouvez l'avoir automatiquement.
3) Vivre avec et régler la largeur et la hauteur, cela lui donnera une apparence déformée, mais la bonne taille obligera l'utilisateur à télécharger l'image en taille réelle.
Bonne chance!