Redimensionnement automatique de l'image en fonction des dimensions de la fenêtre du navigateur

J'ai une mise en page de base avec un en-tête de 100% de largeur et un pied de page collant. Entre les deux, j'ai un grand graphique.Redimensionnement automatique de l'image en fonction des dimensions de la fenêtre du navigateur

Je voudrais redimensionner dynamiquement le graphique en fonction de la taille de la fenêtre.

Je préfère ne pas utiliser flash, et je me demandais s'il y avait un moyen facile de le faire avec jquery/javascript. Je ne suis pas vraiment un expert en jquery/javascript, je me demandais comment aborder cela, car il y a un composant qui le fait déjà.

Source

2010-12-31 Dkong

Utilisez pourcentage, ils sont les plus susceptibles de vous aider comme Babiker mentionné – Ramilol

img.thespecialimage { 
    min-height : 100%; 
    min-width : 100%; 
    max-height : 100%; 
    max-width : 100%; 
}

Source

2010-12-31 23:04:59 Gabriel

Gabriel, je vais essayer ça. Savez-vous si cela fonctionnera dans tous les navigateurs? – Dkong

En fonction de l'environnement (et si vous souhaitez utiliser CSS3), une mise à l'échelle correcte peut être utile: http://robertnyman.com/css3/background-size/background-size.html – Xenethyl

@Xenethyl vous devriez l'afficher comme une réponse, je vais upvote cela. @Dkong vous pouvez trouver un peu d'étrangeté dans IE5 et peut-être un peu dans IE6, mais cela devrait fonctionner le plus partout ailleurs. – Gabriel

Définissez les conteneurs d'image en largeur pour cent comme dans width:{amount}%;, puis définissez la largeur de l'image en pour cent également. De cette façon, votre conteneur d'image s'élargit au fur et à mesure que votre image se développe, ou du moins semble-t-il, car l'image s'étend réellement à mesure que le conteneur se développe. Vous n'avez pas nécessairement besoin de définir la largeur de l'image à 100%, mais quoi que vous définissiez est la largeur relative des conteneurs.

Source

2010-12-31 23:10:12 Babiker

+1 pour l'utilisation des pourcentages – Ramilol

@Ramilol - Merci. – Babiker

Vous pouvez également définir 'height: ...%'. Ce sera en pourcentage de la hauteur du parent positionné. Si vous ne définissez que la largeur ou la hauteur, l'autre sera calculée pour vous en fonction du format de l'image. – Phrogz

Si vous souhaitez utiliser CSS3 et afficher votre image en tant qu'arrière-plan dans un élément, utilisez background-size. Cette route vous permet de redimensionner l'image tout en conservant ses proportions.

Here's a quick example of background-size.

Cela peut bien sûr être fait manuellement si vous surveillez la taille de la fenêtre en utilisant JS et redimensionnez en conséquence. Si vous êtes intéressé par cette route, faites le nous savoir. Je recommanderais d'utiliser une solution CSS pure pour quelque chose de si trivial, si possible, afin de ne pas aliéner les utilisateurs avec JS désactivé.

Source

2010-12-31 23:17:42 Xenethyl

<style> 
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;} 
.resize {width:100%; height:auto;} 
</style>  

<div class="wrapper"> 
    <img class="resize" src="image.jpg" /> 
</div>

Cela redimensionnera votre image pour correspondre à votre conteneur et garder le ratio en place. Si vous définissez le conteneur sur un pourcentage, tout va évoluer.

largeur wrapper = 960px divisé par la largeur de l'écran = 1640px

Si vous voulez que le site entier à répondre que vous devez faire le calcul tout en bas. diviser l'enfant par son parent. J'espère que cela t'aides!

Source

2011-05-17 05:36:49 Alan

Redimensionnement automatique de l'image en fonction des dimensions de la fenêtre du navigateur

Répondre

Questions connexes