Mise à l'échelle proportionnelle des images en CSS avec largeur maximale

Question

En ce moment, j'utilise max-width pour mettre les images à l'échelle pour les adapter. Cependant, ils ne évoluent pas proportionnellement. Y a-t-il un moyen de faire en sorte que cela se produise? Je suis ouvert à Javascript / jQuery.

Si possible, existe-t-il un moyen de le faire sans connaître les dimensions originales de l'image (peut-être déterminer cela en utilisant Javascript / jQuery)?

Answer 1

Contrairement à la réponse acceptée, vous pouvez le faire sans spécifier la taille dans le HTML. Tout peut être fait en CSS:

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

Answer 2

Vous devez spécifier la largeur et la hauteur d'origine:

 <img src="/whatever" width="100" height="200" alt="Whatever" />
 

Et puis utilisez quelque chose comme ça dans le CSS:

 #content img { max-width: 100%; height: auto }
 

Vous pouvez essayer cela avec jQuery si vous n'avez pas la largeur et la hauteur à l'avant, mais votre kilométrage peut varier:

 $(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});
 

Remplacez évidemment #content par le sélecteur auquel vous souhaitez étendre la fonctionnalité.

Answer 3

lors de la configuration d'une largeur constante, utilisez:

 height: auto
 

Answer 4

Voici comment le faire sans Javascript. Réglez votre largeur maximale à la longueur souhaitée.

#content img { max-width: 620px; height: auto; }

Cela a fonctionné pour moi testé sur un Mac avec Firefox 28, Chrome 34 et Safari 7 lorsque je n'avais aucun paramètre de largeur ou de hauteur explicitement défini dans les balises IMG.

Ne définissez pas votre largeur en CSS à 100% après le paramètre de largeur maximale comme une personne l'a suggéré, car alors les images plus étroites que la largeur du conteneur (comme les icônes) seront gonflées beaucoup plus grandes que souhaité.

Answer 5

En utilisant à la fois la largeur et la largeur maximale sur l'image, vissez IE8.

Mettez la largeur sur votre image et enveloppez-la dans un div qui a la largeur maximale. (Alors maudissez MS.)