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.)
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%
etheight:auto
. Imagemax-width:100%
etheight:auto
fonctionnent dans IE7, mais pas dans IE8 (oui, un autre bogue bizarre IE). Pour résoudre ce problème, vous devez ajouterwidth: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é).
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:
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.
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
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;
}
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>
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.
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 :