web-dev-qa-db-fra.com

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

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

Cela fonctionne bien dans Firefox, mais il y 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 bien dans Safari, mais parfois, l'image est chargée avec sa largeur/hauteur minimale. Peut-être cela est-il causé par la taille de l'image, je ne suis pas sûr. (Si le chargement est bon, essayez d'actualiser plusieurs fois pour voir le bogue.)

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

cssimagebrowserresizewindow
89
depi

Ceci peut être réalisé avec du CSS pur et ne nécessite même pas de requêtes multimédia.

Pour rendre les images flexibles, ajoutez simplement max-width:100% et height:auto. Image max-width:100% et height:auto fonctionnent dans IE7, mais pas dans IE8 (oui, un autre bogue bizarre IE). Pour résoudre ce problème, vous devez ajouter width:auto\9 pour 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 à l'image, placez-la simplement dans un conteneur, par exemple:

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

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

169
Kurt Schindler

Solution 2018:

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

cat

Maintenant, nous voulons ce chat dans notre code, tout en respectant les ratios d'aspect:

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

Jusqu'ici pas vraiment intéressant, mais si nous voulions changer la hauteur du chat 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 sur 50vw vw (= largeur de la fenêtre d'affichage) signifie que l'image aura une largeur X de la fenêtre d'affichage, en fonction du chiffre fourni. Cela fonctionne aussi 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 à 20% maximum de la fenêtre.

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

Dans IE onresize, l'événement est déclenché à chaque changement de pixel (largeur ou hauteur), ce qui peut entraîner des problèmes de performances. Retardez le redimensionnement de l'image pendant quelques millisecondes en utilisant window.setTimeout () de javascript.

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

11
Shahid

Définissez la propriété de redimensionnement à la fois. Ensuite, vous pouvez changer la largeur et la hauteur comme ceci:

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

Utilisez-vous jQuery?

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

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

MODIFIER:

Ceci est la solution CSS, je viens d'ajouter un style = "width: 100%" , et fonctionne pour moi au moins dans chrome et Safari. Je n'ai pas ie, alors testez simplement là-bas, et laissez-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>
5
Arthur Neves

Au départ, j'utilisais le code HTML/CSS suivant:

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

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

Puis j'ai ajouté class="img" au <div> comme ceci:

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

Et tout a commencé à bien fonctionner.

3
Rin

Vous pouvez utiliser la propriété CSS3 scale pour redimensionner une image avec css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Autres lectures :

3
ShahRokh