HTML - afficher une image aussi grande que possible tout en conservant le format d'image

J'aimerais avoir une page HTML qui affiche une seule image PNG ou JPEG. Je veux l'image pour prendre tout l'écran, mais quand je fais ceci:HTML - afficher une image aussi grande que possible tout en conservant le format d'image

<img src="whatever.jpeg" width="100%" height="100%" />

Il étend simplement l'image et bousille le rapport d'aspect. Comment puis-je résoudre ceci afin que l'image ait le bon rapport d'aspect tout en passant à la taille maximale possible?

La solution publié par Wayne près œuvres, sauf dans le cas où vous avez une image de haut et une grande fenêtre. Ce code est une légère modification de son code qui fait ce que je veux:

<html> 
<head> 
<script> 
function resizeToMax(id){ 
    myImage = new Image() 
    var img = document.getElementById(id); 
    myImage.src = img.src; 
    if(myImage.width/document.body.clientWidth > myImage.height/document.body.clientHeight){ 
     img.style.width = "100%"; 
    } else { 
     img.style.height = "100%"; 
    } 
} 
</script> 
</head> 
<body> 
<img id="image" src="test.gif" onload="resizeToMax(this.id)"> 
</body> 
</html>

Source

2008-10-02 Adam Pierce

cette utilisation de clientWidth fonctionne-t-elle dans firefox etc ou est-ce une propriété d'IE uniquement? – frankster

Voici une fonction rapide qui ajustera la hauteur ou la largeur à 100% selon ce qui est le plus grand. Testé dans FF3, IE7 & Chrome

<html> 
<head> 
<script> 
function resizeToMax(id){ 
    myImage = new Image() 
    var img = document.getElementById(id); 
    myImage.src = img.src; 
    if(myImage.width > myImage.height){ 
     img.style.width = "100%"; 
    } else { 
     img.style.height = "100%"; 
    } 
} 
</script> 
</head> 
<body> 
<img id="image" src="test.gif" onload="resizeToMax(this.id)"> 
</body> 
</html>

Source

2008-10-02 03:03:19 Wayne

Ce code ** presque ** fonctionne sauf dans le cas où l'image est grande et la fenêtre large. J'ai fait une petite modification (que j'ai ajoutée à la question originale) pour prendre en compte la taille de la fenêtre et elle fait maintenant ce que je veux. Je vous remercie. –

n'avez-vous pas besoin de régler l'autre aspect sur 'auto' pour que cela fonctionne? ou est-ce supposé être le défaut? –

Auto est la valeur par défaut. C'est la même chose que de ne pas définir la propriété. – Wayne

Essayez ceci:

<img src="whatever.jpeg" width="100%" height="auto" />

Source

2008-10-02 02:48:36

Cela fonctionne si la page est plus grande que l'image, mais ne fonctionne pas si l'image est plus grande que la page, donc cela ne résout pas tout à fait mon problème. –

Pour se greffent sur Franci Penov, oui, vous voulez juste mettre un d'entre eux. Si vous avez une image large, vous voulez définir la largeur à 100% et laisser la hauteur. Si vous avez une longue image, vous voulez régler la hauteur à 100% et laisser une largeur.

Source

2008-10-02 02:51:27

Pour cela, JavaScript est votre ami. Ce que vous voulez faire, c'est charger la page, parcourir le dom, et pour chaque image (ou alterantiellement, passer une fonction un identifiant d'image si c'est juste une seule image) vérifier si l'attribut de l'image est plus grand, largeur.

Ceci est l'IMAGE elle-même, pas l'étiquette.

Une fois que vous avez obtenu que, puis réglez la hauteur/largeur correspondante sur l'étiquette à 100% et l'autre à l'auto

certains code utiles - Tout sur le dessus de ma tête, de sorte que votre kilométrage peut varier sur la syntaxe ..

var imgTag = $('myImage'); 
var imgPath = imgTag.src; 
var img = new Image(); 
img.src = imgPath; 
var mywidth = img.width; 
var myheight = img.height;

En aparté, ce serait une tâche beaucoup plus facile sur le côté serveur des choses. Sur le serveur, vous pouvez littéralement modifier la taille de l'image diffusée dans le navigateur.

Source

2008-10-02 03:07:46

Vous ne souhaitez pas forcément vous étirer dans une certaine direction en fonction de ce qui est le plus grand. Par exemple, j'ai un moniteur à écran large, donc même si c'est une image plus large que haute, l'étirer de gauche à droite peut encore couper les bords supérieur et inférieur.

Vous devez calculer le rapport entre la largeur et la hauteur de la fenêtre et la largeur et la hauteur de l'image. Le plus petit est votre axe de contrôle - l'autre dépend. Cela est vrai même si les deux axes sont plus grands que la longueur de fenêtre respective.

<script type="text/javascript"> 
// <![CDATA[ 
function resizeToMax (id) { 
    var img = document.getElementById(id); 
    myImage = new Image(); 
    myImage.src = img.src; 
    if (window.innerWidth/myImage.width < window.innerHeight/myImage.height) { 
     img.style.width = "100%"; 
    } else { 
     img.style.height = "100%"; 
    } 
} 
// ]]> 
</script>

Source

2008-10-02 03:24:44

testé sur IE et Firefox, ainsi que la première ligne centrerons l'image:

<div align="center"> 
<embed src="image.gif" height="100%">

...aussi grand pour préserver aspect rapport avec une autre valeur de taille, donc pas plus ennuyeux calculs =)

Source

2012-08-17 21:22:04 tito76

Il est également possible de le faire avec CSS pur en utilisant une image d'arrière-plan et la propriété background-size:contain:

<head> 
<style> 
#bigPicture 
{ 
    width:100%; 
    height:100%; 
    background:url(http://upload.wikimedia.org/wikipedia/commons/4/44/CatLolCatExample.jpg); 
    background-size:contain; 
    background-repeat:no-repeat; 
    background-position:center; 
} 
</style> 
</head> 

<body style="margin:0px"> 
    <div id="bigPicture"> 
    </div> 
</body>

Cette a l'avantage de se mettre automatiquement à jour si le conteneur change les proportions, sans avoir à répondre aux événements de redimensionnement (les méthodes Javascript, codées ici, peuvent entraîner la coupure de l'image lorsque l'utilisateur redimensionne le navigateur). La méthode <embed> a le même avantage, mais CSS est beaucoup plus lisse et ne pose aucun problème avec les avertissements de sécurité.

Avertissements:

Aucun élément <img> signifie pas de menu contextuel et aucun texte alt.
Le support de IE pour background-size:contain est 9+ seulement, et je ne pouvais même pas obtenir cela pour fonctionner dans IE9 (pour des raisons inconnues).
Il semble que toutes les propriétés background-* doivent être spécifiées dans le même bloc CSS que l'image d'arrière-plan, de sorte que plusieurs images sur la même page devront chacun leur propre contain, no-repeat et center.

Source

2012-10-19 18:00:31 ondovb

Non, vous n'avez pas besoin de spécifier tous les 'background- *' dans le même bloc CSS. Vous avez juste besoin de définir l'URL dans la propriété 'background-image' car' background: url (xxx) 'remplace toutes les propriétés' background- * '. – Shiva127

La meilleure façon de le faire (si vous n'avez pas besoin de soutenir IE) est de définir la propriété object-fit CSS à contain:

img { object-fit: contain; }

Voir aussi:

Source

2018-01-15 19:47:56

HTML - afficher une image aussi grande que possible tout en conservant le format d'image

Répondre

Questions connexes