Mise à l'échelle des Images proportionnellement en CSS avec une largeur maximale

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

Lors de la configuration de largeur constante utilisez:

height: auto

Voici comment le faire sans Javascript. Définissez votre max-width sur 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 Quand je n'avais pas de paramètres de largeur ou de hauteur explicitement définis dans les balises img.

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

En utilisant à la fois width et max-width sur L'image visser IE8.

Mettez la largeur sur votre image et enveloppez - la dans un div qui a la largeur maximale. (Puis maudire Mme)

Je devais le faire avec les exigences suivantes:

1. la Page ne doit pas être refondue lorsque les images se chargent. Les tailles d'image sont connues du côté serveur et des calculs peuvent être effectués.
2. les Images doivent évoluer proportionnellement
3. les Images ne doivent pas être plus larges que l'élément contenant
4. les Images ne doivent pas être mises à l'échelle, seulement vers le bas si nécessaire
5. doit utiliser un élément img et non un arrière-plan pour s'assurer que les images s'impriment également correctement
6. Non JavaScript!

Le plus proche que j'ai trouvé est ce terrible engin. Il nécessite trois éléments et deux styles en ligne, mais pour autant que je sache, c'est la meilleure façon de mettre à l'échelle les images proportionnellement. Toutes les suggestions height: auto; ici annulent le point de spécifier les dimensions de l'image côté serveur et font sauter le contenu pendant le chargement.

.image {
  position: relative;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- container element with max-width prevents upscaling -->
<div class="image" style="max-width: 640px;">
  <!-- div with padding equal to the image aspect ratio to make
       the element the correct height -->
  <div style="padding-top: 75%;"></div>
  <!-- img scaled to completely fill container -->
  <img src="//placebear.com/640/480" />
</div>

Https://jsfiddle.net/Lqg1fgry/6/ - Le "Bonjour" est là pour que vous puissiez voir si le contenu après l'image saute.

J'espère qu'il n'est pas trop tard, mais avec ce pease de code, j'ai réussi à obtenir des images proportionnelles dans ma galerie. il faudra du temps pour comprendre ce qui se passe, mais l'essayer et d'en profiter.

<style>
div_base {
    width: 200px; // whatever size you want as constrain unchangeable
    max-width: 95%; // this is connected to img and mus exist
}
div_base img {
    width: auto !important;  // very important part just have it there!
    height: 95%;  // and this one is linked to maxW above. 
}
</style>

function resizeBackground() {
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width();
    var stageHeight=$(window).height();
    var newHeight=$("#myPic").height();
    if( $(window).width() > $(window).height() )  {
        scale = stageHeight/newHeight;
        scale = stageWidth/newWidth;
    } else {
        scale = stageWidth/newWidth;
        scale = stageHeight/newHeight;
    }
    newWidth = newWidth*scale;
    newHeight = newHeight*scale
    $("#myPic").width(newWidth);
    $("#myPic").height(newHeight);
}