Les solutions ci-dessous permettra à l'augmentation et la réduction de l'image, selon le parent largeur de la boîte.

Toutes les images ont un conteneur parent avec une largeur fixe à des fins de démonstration uniquement . En production, ce sera la largeur de la boîte parente.

Meilleures Pratiques (2018):

Cette solution indique au navigateur de rendre l'image avec la largeur maximale disponible et d'ajuster la hauteur en pourcentage de celle-ci largeur.

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

Solution De Fantaisie:

Avec la solution fancier, vous pourrez recadrer l'image quelle que soit sa taille et ajouter une couleur d'arrière-plan pour compenser le recadrage.

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

Pour la ligne spécifiant le remplissage, vous devez calculer le rapport d'aspect de l'image, par exemple:

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

Donc, TOP padding = 34.37%.

J'ai eu du mal avec ce problème assez dur, et finalement arrivé à cette solution simple:

object-fit: cover;
width: 100%;
height: 250px;

Vous pouvez ajuster la largeur et la hauteur pour répondre à vos besoins, et la propriété object-fit fera le recadrage pour vous.

Acclamations.

La propriété background-size est ie > = 9 uniquement, mais si cela vous convient, vous pouvez utiliser un div avec background-image et définir background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Maintenant, vous pouvez simplement définir la taille de votre div à ce que vous voulez et non seulement l'image conservera son rapport d'aspect, mais elle sera également centralisée verticalement et horizontalement dans la div. N'oubliez pas de définir les tailles sur le css car les divs n'ont pas l'attribut width/height sur la balise elle-même.

Cette approche est différente de la réponse setecs, en utilisant cela, la zone d'image sera constante et définie par vous (laissant des espaces vides horizontalement ou verticalement en fonction de la taille div Et du rapport d'aspect de l'image), tandis que la réponse setecs vous obtiendra une boîte exactement la taille de l'image mise à l'échelle (sans espaces vides).

Modifier: Selon la documentation MDN background-size , Vous pouvez simuler la propriété background-size dans IE8 en utilisant une déclaration de filtre propriétaire:

Bien Que Internet Explorer 8 ne supporte pas la propriété background-size, il est possible d'émuler certaines de ses fonctionnalités en utilisant la fonction-ms-filter non standard:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

Très similaire à certaines réponses ici, mais dans mon cas, j'avais des images qui étaient parfois plus grandes, parfois plus grandes.

Ce style a fonctionné comme un charme pour s'assurer que toutes les images utilisent tout l'espace disponible, gardent le ratio et non les coupes:

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

Supprimez la propriété "height".

<img src="big_image.jpg" width="900" alt=""/>

En spécifiant les deux, vous modifiez le rapport d'aspect de l'image. Il suffit d'en définir un pour redimensionner mais préserver le rapport d'aspect.

Éventuellement, pour limiter les surdimensionnements:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

Il suffit d'ajouter ceci à votre css, Il va automatiquement rétrécir et se développer en gardant le ratio d'origine.

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

Il N'y a pas de moyen standard de conserver le rapport d'aspect pour les images avec width, height et max-width spécifiés ensemble.

Nous sommes donc obligés soit de spécifier width et height pour empêcher les "sauts" de page pendant le chargement des images, soit d'utiliser max-width et de ne pas spécifier de dimensions pour les images.

Spécifier juste width (Sans height) n'a généralement pas beaucoup de sens, mais vous pouvez essayer de remplacer l'attribut height HTML en ajoutant une règle comme IMG {height: auto; } dans votre feuille de style.

Voir Aussi Le Firefox connexe bug 392261 .

Définissez la classe CSS de votre balise de conteneur d'image sur image-class:

<div class="image-full"></div>

Et ajoutez ceci à votre feuille de style CSS.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

Https://jsfiddle.net/sot2qgj6/3/

Voici la réponse si vous voulez mettre une image avec pourcentage fixe de largeur, mais pas fixe de pixels de la largeur de la.

Et ce sera utile lorsque vous traitez avec taille différente de l'écran .

Les astuces sont

1. en utilisant padding-top pour définir la hauteur à partir de la largeur.
2. utilisation de position: absolute pour placer l'image dans l'espace de remplissage.
3. en utilisant max-height and max-width pour vous assurer que l'image ne sera pas sur le parent élément.
4. utiliser display:block and margin: auto pour centrer l'image.

J'ai aussi commenté la plupart des astuces à l'intérieur du violon.

Je trouve aussi d'autres façons d'y arriver. Il n'y aura pas d'image réelle en html, donc je perfer personnellement la réponse supérieure quand j'ai besoin de l'élément " img " en html.

CSS simple en utilisant background http://jsfiddle.net/4660s79h/2/

fond-image avec mot sur haut http://jsfiddle.net/4660s79h/1/

Le concept à utiliser position absolute est d'ici http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Pour maintenir une image réactive tout en imposant à l'image un certain rapport d'aspect, vous pouvez effectuer les opérations suivantes:

HTML:

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

Et SCSS:

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

Cela peut être utilisé pour appliquer un certain rapport d'aspect, quelle que soit la taille de l'image que les auteurs téléchargent.

Merci à @Kseso à http://codepen.io/Kseso/pen/bfdhg . Vérifiez cette URL pour plus de ratios et un exemple de travail.

Vous pouvez créer un div comme ceci:

<div class="image" style="background-image:url('/to/your/image')"></div>

Et utilisez ce css pour le styliser:

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

Vous pouvez utiliser ceci:

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

Pour forcer une image qui correspond à une taille exacte, vous n'avez pas besoin d'écrire trop de codes. C'est si simple

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

Cela fera rétrécir l'image si elle est trop grande pour la zone spécifiée (comme inconvénient, elle n'agrandira pas l'image).

La solution de setec est très bien pour "Shrink To Fit" en mode auto. Mais, pour développer de manière optimale pour s'adapter en mode 'auto' , vous devez d'abord mettre l'image reçue dans un ID temporaire, Vérifiez s'il peut être étendu en hauteur ou en largeur (selon son rapport d'aspect v/S le rapport d'aspect de votre bloc d'affichage),

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

Cette approche est utile lorsque les images reçues sont plus petite que la zone d'affichage. Vous devez les enregistrer sur votre serveur dans la petite taille D'origine plutôt que leur version étendue pour remplir votre plus grande boîte d'affichage pour économiser sur la taille et la bande passante.

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">

Que diriez-vous d'utiliser un pseudo élément pour l'alignement vertical? CE Code moins est pour un carrousel mais je suppose que cela fonctionne sur chaque conteneur de taille fixe. Il gardera le rapport d'aspect et insérera des barres @ gris-foncé en haut / en bas ou à gauche / écrire pour la dimension la plus courte. En attendant, l'image est centrée horizontalement par le texte-align et verticalement par le pseudo-élément.

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }