Comment puis-je redimensionner une image dynamiquement avec CSS lorsque la largeur / hauteur du navigateur change?


107

Je me demande comment je pourrais redimensionner une image avec la fenêtre du navigateur, voici ce que j'ai fait jusqu'à présent (ou télécharger l'ensemble du site dans un ZIP ).

Cela fonctionne bien dans Firefox, mais cela a des problèmes dans Chrome: l'image ne se redimensionne pas toujours, cela dépend en quelque sorte de la taille de la fenêtre lorsque la page a été chargée.

Cela fonctionne également correctement dans Safari, mais parfois l'image est chargée avec sa largeur / hauteur minimale. Peut-être que cela est dû à la taille de l'image, je ne suis pas sûr. (Si le chargement est correct, essayez d'actualiser plusieurs fois pour voir le bogue.)

Des idées sur la façon de rendre cela plus résistant aux balles? (Si JavaScript est nécessaire, je peux aussi vivre avec cela, mais CSS est préférable.)


Utilisez les requêtes multimédias CSS3 ou le gestionnaire d'événements window.onresize de javascript. w3schools.com/jsref/event_onresize.asp
Shahid

Si vous utilisez bootstrap, ajoutez une classe comme celle-ci class = "img-thumbnail". C'est tout.
VivekDev

Réponses:


179

Cela peut être fait avec du CSS pur et ne nécessite même pas de requêtes multimédias.

Pour rendre les images flexibles, ajoutez simplement max-width:100%et height:auto. Image max-width:100%et height:autofonctionne dans IE7, mais pas dans IE8 (oui, un autre bogue IE bizarre). Pour résoudre ce problème, vous devez ajouter width:auto\9pour IE8.

source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Et si vous souhaitez appliquer une largeur maximale fixe de l'image, placez-la simplement dans un conteneur, par exemple:

<div style="max-width:500px;">
    <img src="..." />
</div>

Exemple JSFiddle ici . Aucun JavaScript requis. Fonctionne dans les dernières versions de Chrome, Firefox et IE (c'est tout ce que j'ai testé).


J'ai testé le lien jsfiddle avec Opera 11 et certains Firefox récents et bien qu'il redimensionne joliment l'image lorsque la fenêtre se rétrécit, il ne parvient pas à le faire lorsque la fenêtre dépasse 650 pixels
GDR

3
@GDR Je ne voudrais pas que l'image augmente au-delà de sa taille native, elle se pixelliserait et aurait l'air moche. Si vous avez besoin d'agrandir, je commencerais simplement par une image plus grande.
Kurt Schindler

OK, alors j'ai supposé à tort que c'était le but de cette question, désolé.
GDR

2
Définir max-width à 100% et height à auto n'a rien fait pour moi - j'ai en effet travaillé avec un conteneur. Enveloppez l'image dans un div, définissez la hauteur / largeur maximale et laissez l'image (#div img {}) avoir une largeur de 100% et une hauteur de 100%.
Mave

1
Quel genre de sorcellerie est ce?! C'est génial!
Leonardo Wildt

24

Solution 2018 et ultérieure:

L'utilisation d'unités relatives à la fenêtre devrait vous faciliter la vie, étant donné que nous avons l'image d'un chat:

chat

Maintenant, nous voulons ce chat dans notre code, tout en respectant les proportions:

img {
  width: 100%;
  height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Jusqu'à présent, ce n'est pas vraiment intéressant, mais que se passe-t-il si nous voulons changer la largeur des chats pour qu'elle soit au maximum de 50% de la fenêtre?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

La même image, mais maintenant limitée à une largeur maximale de 50vw vw (= largeur de la fenêtre) signifie que l'image aura une largeur X de la fenêtre, en fonction du chiffre fourni. Cela fonctionne également pour la hauteur:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Cela limite la hauteur de l'image à un maximum de 20% de la fenêtre.


Merci! Comment déterminer vh et vw lorsque j'ai des images de tailles différentes?
Herman Toothrot

Salut @HermanToothrot, dites-vous que vous souhaitez conserver le rapport hauteur / largeur tout en utilisant les unités de fenêtre?
roberrrt-s

@Roberrrt dit que j'ai quelques images de différentes tailles et dans un bloc en ligne, et que je souhaite conserver le rapport hauteur / largeur de toutes, mais les définir à la même hauteur ou largeur.
Herman Toothrot

Soit largeur: 100% et hauteur maximale: 50vh, soit inverse
roberrrt-s

@Roberrrt width: 100% ne semble pas avoir beaucoup d'effet. Je dois juste deviner vh, dans mon cas, 50 c'est trop et 40 maximise la hauteur de toutes les images.
Herman Toothrot

11
window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

Dans IE onresize événement est déclenché à chaque changement de pixel (largeur ou hauteur), il peut donc y avoir un problème de performances. Retardez le redimensionnement de l'image de quelques millisecondes en utilisant window.setTimeout () de javascript.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html


6

Définissez la propriété resize sur les deux. Ensuite, vous pouvez changer la largeur et la hauteur comme ceci:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

5

Utilisez-vous jQuery?

Parce que j'ai fait une recherche rapide sur les plugins jQuery et qu'ils semblent avoir un plugin pour le faire, vérifiez celui-ci, devrait fonctionner:

http://plugins.jquery.com/project/jquery-afterresize

ÉDITER:

C'est la solution CSS, j'ajoute juste un style = "width: 100%" , et fonctionne pour moi au moins dans Chrome et Safari. Je n'ai pas de ie, alors faites un test là-bas, et faites-moi savoir, voici le code:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

1
jQuery n'est pas nécessaire pour un problème aussi simple. Pourquoi charger 50 Ko + (bibliothèque entière) serait-il bénéfique sur quelques lignes de JS?

1
bien sûr, vous avez tout à fait raison, je s why Ilui demande s'il utilise jQuery car si c'est le cas, cela pourrait être une bonne idée, ajoutez simplement le plugin!
Arthur Neves

donc sans JS, ce n'est pas possible? J'ai trouvé une solution simple comme celle-ci unstoppablerobotninja.com/search/… , mais je n'ai pas été en mesure de l'implémenter entièrement dans mon modèle avec
succès

4

Au départ, j'utilisais le html / css suivant:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}
<div> 
  <img src="..." />
</div>

Ensuite, j'ai ajouté class="img"à <div> ceci:

<div class="img">
  <img src="..." />
</div>

Et tout a commencé à bien fonctionner.



2

Utilisez simplement ce code. Ce que la plupart oublient, c'est de spécifier la largeur maximale comme largeur maximale de l'image

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Vérifiez cette démonstration http://shorturl.at/nBKVY


0

Essayer

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Ne fonctionne qu'avec le bloc d'affichage et le bloc en ligne, cela n'a aucun effet sur les éléments flexibles car je viens de passer des siècles à essayer de le savoir.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.