Mise à l'échelle HTML img

114

J'essaye d'afficher de grandes images avec des balises HTML img. Au moment où ils sortent du bord de l'écran; comment puis-je les mettre à l'échelle pour rester dans la fenêtre du navigateur?

Ou dans le cas probable où cela ne serait pas possible, est-il possible de dire au moins "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 réfèrent à tous les attributs avec lesquels le conteneur peut se retrouver, 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. La largeur maximale ne fonctionne pas.

html image-scaling rwallace
la source
4
Gardez à l'esprit qu'il n'est pas recommandé d'envoyer des images volumineuses et de les réduire avec css. Il est préférable d'avoir différentes versions de la même image pour économiser de la bande passante et rendre la page plus réactive (même si l'image aura l'air petite, l'image complète sera envoyée).
Esteban Küber
1
rwallace, utilisez-vous .net ou PHP ou autre chose que du HTML pur?
Dorjan
1
La taille du fichier image n'a pas d'importance, il n'y a aucune exigence dans le cas que je cherche à être économe en bande passante. J'utilise PHP, mais la solution HTML fonctionne.
rwallace

Réponses:

135

Réglez uniquement widthou height, et il mettra automatiquement l'autre à l'échelle. Et oui, vous pouvez utiliser un pourcentage.

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

RiddlerDev
la source
7
Veuillez noter que faire cela sur des images massives entraînera de longs temps de téléchargement pour des pages qui ne devraient pas avoir de longs temps de téléchargement. Il est toujours préférable de redimensionner réellement l'image si possible.
ceejayoz
Merci! Il s'avère que votre solution consistant à définir uniquement la largeur fonctionne non seulement pour une mise à l'échelle correcte, mais fait également la première partie simplement en définissant la largeur à 100%.
rwallace
2
@ceejayoz Je suis d'accord, mais ce n'est pas ce qu'il demande.
RiddlerDev
@ceejayoz Je me demande, pourquoi cela prend-il plus de temps? Ne doit-il pas être redimensionné lorsqu'il l'affiche pour les deux situations? Ou dites-vous redimensionner manuellement l'image réelle et modifier le fichier?
Abdul
2
@Abdul Je dis qu'une image de 3 000 x 3 000 pixels de 5 Mo ne doit pas être utilisée dans un emplacement de 100 x 100 pixels de votre site Web.
ceejayoz
18

css suffit:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
Selvadurai Handeeban
la source
9

Je sais que cette question est posée depuis longtemps, mais à ce jour, une réponse simple est:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

L'utilisation de vw ici indique que la largeur est relative à 55% de la largeur de la fenêtre.

Aujourd'hui, tous les principaux navigateurs le prennent en charge.

Vérifiez ce lien .

Dimitri de Jesus
la source
1
vwa été une bouée de sauvetage pour moi, les autres méthodes ne fonctionnaient pas pour l'image à portée de main.
caram
6

Aucun 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, l'utilisation d'un pourcentage fonctionne correctement et se met à jour dynamiquement lors du redimensionnement de la fenêtre.

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

Vous n'avez pas besoin d'un attribut de largeur, la largeur est mise à l'échelle proportionnellement à la modification de la taille de la fenêtre du navigateur.

Et ce petit bijou, au cas où l'image serait mise à l'échelle, elle n'aura pas l'air (trop) en bloc (elle interpole).

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

Les accessoires vont à cette source: Ultimate IE6 Cheatsheet: Comment corriger plus de 25 bogues d'Internet Explorer 6

non identifié-1
la source
6

L'ajout max-width: 100%;au imgtag fonctionne pour moi.

Ralph David Abernathy
la source
2

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 spectateurs à télécharger des fichiers plus volumineux que nécessaire

émeute
la source
0

La meilleure façon dont je sais comment faire est:

1) régler le débordement pour faire défiler et de cette façon l'image resterait mais vous pouvez faire défiler pour la voir à la place

2) téléchargez une image plus petite. Maintenant, il existe de nombreux programmes lors du téléchargement (vous aurez besoin de quelque chose comme PHP ou .net pour faire cela), vous pouvez le faire évoluer automatiquement.

3) Vivre avec et définir la largeur et la hauteur, bien que cela lui donne un aspect déformé, mais la bonne taille obligera toujours l'utilisateur à télécharger l'image en taille réelle.

Bonne chance!

Dorjan
la source