Mise à l’échelle de l’img HTML

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 dimensionner pour restr dans la fenêtre du navigateur?

Ou dans le cas probable où cela n’est pas possible, est-il possible de dire au moins “afficher cette image à 50% de sa largeur et de sa hauteur normales”?

Les atsortingbuts width et height déforment l’image – pour autant que je sache, cela est dû au fait qu’ils font référence aux atsortingbuts avec lesquels le conteneur peut se retrouver, ce qui ne sera pas lié à l’image. Je ne peux pas spécifier de pixels car je dois gérer une grande collection d’images ayant chacune une taille de pixel différente. La largeur maximale ne fonctionne pas.

Ne définissez que la width ou la height et redimensionne automatiquement l’autre. Et oui, vous pouvez utiliser un pourcentage.

La première partie peut être faite, mais nécessite JavaScript, donc peut ne pas fonctionner pour tous les utilisateurs.

En regardant la référence W3 Schools pour la balise img , vous devriez pouvoir faire quelque chose comme:

  

Pour une mise à l’échelle automatique via Javascript, consultez cette astuce

Pas de Javascript requirejs

IE6 Internet Explorer 6

Le pourcentage ne fonctionne que pour la largeur d’un élément, mais la height:100%; ne fonctionne pas sans le code correct.

CSS

 html, body { height:100%; } 

Ensuite, en utilisant un pourcentage fonctionne correctement et mise à jour dynamicment sur le redimensionnement de la fenêtre.

  

Vous n’avez pas besoin d’atsortingbut width, la largeur est proportionnelle à la taille de la fenêtre du navigateur.

Et ce petit bijou, c’est que si l’image est agrandie, elle ne semblera pas trop (trop) bloquée (elle interpole).

 img { -ms-interpolation-mode: bicubic; } 

Les accessoires vont à cette source: Ultimate IE6 Cheatsheet: Comment réparer 25+ Internet Explorer 6 bugs

Ajout max-width: 100%; à la balise img fonctionne pour moi.

css suffit:

 width : desired_width; height: auto;/*to preserve the aspect ratio of the image*/ 

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 forcez vos utilisateurs à télécharger des fichiers plus volumineux qu’ils n’en ont besoin.

La meilleure façon de savoir comment faire est de:

1) définir le débordement pour faire défiler et comment l’image restrait dans mais vous pouvez faire défiler pour le voir à la place

2) télécharger une image plus petite. Maintenant, il y a beaucoup de programmes là-bas lors du téléchargement (vous aurez besoin de quelque chose comme PHP ou .net pour faire cela btw), vous pouvez avoir son échelle automatique.

3) Vivre avec elle et définir la largeur et la hauteur, cela le rendra déformé, mais la bonne taille obligera l’utilisateur à télécharger l’image en taille réelle.

Bonne chance!