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

Question

Je me demande comment j'ai pu faire une image redimensionner la fenêtre du navigateur, ici est 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 il a des problèmes dans google Chrome: l'image n'est pas toujours redimensionner, de toute façon il dépend de la taille de la fenêtre lorsque la page a été chargée.

Cela fonctionne aussi bien dans Safari, mais parfois, l'image est chargé avec son minimum largeur/hauteur. C'est peut-être causé par la taille de l'image, je ne suis pas sûr. (Si il charge d'accord, essayez d'actualiser plusieurs fois pour voir le bug.)

Des idées sur comment ai-je pu faire cela plus l'épreuve des balles? (Si JavaScript est nécessaire je peux vivre avec ça aussi, mais le CSS est préférable.)

Answer 1

Cela peut être fait avec du pur CSS et n'a même pas besoin de requêtes de média.

Pour rendre les images flexible, il suffit d'ajouter max-width:100% et height:auto. Image max-width:100% et height:auto fonctionne dans IE7, mais pas dans IE8 (oui, un autre bizarre IE bug). Pour résoudre ce problème, vous devez ajouter la largeur:automatique\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 un fixe largeur maximale de l'image, il suffit de le placer à l'intérieur d'un conteneur, par exemple:

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

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

Answer 2

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

Dans Internet Explorer, les événements onresize sont déclenchés à 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

Answer 3

utilisez la propriété resize.if mettez cette propriété à la fois, alors vous pouvez changer même la largeur et la hauteur comme ceci:

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

Answer 4

Êtes-vous à l'aide de jQuery?

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

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

EDIT:

C'est le CSS solution, j'ai juste ajouter un style="width: 100%", et fonctionne pour moi au moins dans chrome et Safari. Je n'ai pas ie, il suffit donc de tester là, 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>

Answer 5

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;
}
 

Ces liens peuvent vous aider:

Le site w3school et ce lien