HTML img mise à l'échelle

Question

Je suis en train d'afficher des images de grande taille avec HTML, les balises img. Au moment où ils s'en vont le bord de l'écran; comment puis-je l'échelle de rester 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 la hauteur"?

Les attributs width et height de déformer l'image, autant que je peux dire, c'est qu'ils renvoient à ce que les attributs du conteneur peut se retrouver avec, qui sera sans rapport avec l'image. Je ne peux pas spécifier pixels parce que j'ai à traiter avec une grande collection d'images pour chaque taille de pixel. Max-width ne fonctionne pas.

Answer 1

Ne définissez que la largeur ou la hauteur et l’échelle sera automatiquement redimensionnée. Et oui, vous pouvez utiliser un pourcentage.

La première partie est réalisable, mais requiert JavaScript, ce qui pourrait ne pas fonctionner pour tous les utilisateurs.

Answer 2

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 la mise à l'échelle automatique via Javascript, consultez cette astuce

Answer 3

Pas de Javascript requis.

IE6 Internet Explorer 6

Pour cent ne fonctionne que pour la largeur d'un élément, mais height:100%; ne fonctionne pas sans le bon code.

CSS

html, body { height:100%; } 

Puis à l'aide d'un pourcentage fonctionne correctement, et dynamiquement mises à jour sur la fenêtre de redimensionnement.

<img src="image.jpg" style="height:80%;">

Vous n'avez pas besoin d'un attribut width, la largeur des échelles proportionnellement à la taille de la fenêtre du navigateur est modifiée.

Et ce petit bijou est dans le cas où l'image est mise en place, qu'il ne sera pas (trop) sous forme de blocs (interpole).

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

Accessoires d'aller à cette source: Ultime IE6 Triche: Comment Réparer 25+ Internet Explorer 6 Bugs

Answer 4

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, alors qu'ils en ont besoin

Answer 5

La meilleure façon que je sais comment faire c'est:

1) définir le débordement de défilement et de cette façon, l'image du séjour, mais vous pouvez faire défiler pour voir à la place

2) télécharger une image plus petite. Maintenant il ya beaucoup de programmes là-bas lors du téléchargement (vous aurez besoin de quelque chose comme le PHP ou l' .net pour cela d'ailleurs), vous pouvez l'avoir mise à l'échelle auto.

3) Vivre avec elle et le réglage de la largeur et de hauteur, et ce bien que rendra l'air déformé, mais la bonne taille seront encore aboutir à l'utilisateur d'avoir à télécharger l'intégralité de la taille de l'image.

Bonne chance!