.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>

Antwoord 4, autoriteit 8%

De eigenschap background-size is alleen ie>=9, maar als u dat goed vindt, kunt u een div gebruiken met background-image en background-size: contain:

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

Je kunt nu gewoon je div-grootte instellen op wat je maar wilt en niet alleen behoudt de afbeelding zijn beeldverhouding, hij wordt ook zowel verticaal als horizontaal binnen de div gecentraliseerd. Vergeet niet om de maten in de css in te stellen, aangezien div’s het kenmerk width/height niet op de tag zelf hebben.

Deze aanpak is anders dan het antwoord van Setec. Als u dit gebruikt, is het afbeeldingsgebied constant en wordt het door u gedefinieerd (waarbij lege ruimtes horizontaal of verticaal blijven, afhankelijk van de div-grootte en beeldverhouding), terwijl het antwoord van Setec u een vak geeft dat precies de grootte van de geschaalde afbeelding heeft (zonder lege spaties).

Bewerken:
Volgens de MDN-documentatie voor achtergrondgrootte kunt u de eigenschap background-size simuleren in IE8 met behulp van een eigen filterdeclaratie:

Hoewel Internet Explorer 8 de eigenschap background-size niet ondersteunt, is het mogelijk om een ​​deel van zijn functionaliteit te emuleren met behulp van de niet-standaard -ms-filter-functie:

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

Antwoord 5, autoriteit 7%

Zeer vergelijkbaar met sommige antwoorden hier, maar in mijn geval had ik afbeeldingen die soms groter waren, soms groter.

Deze stijl werkte als een tierelier om ervoor te zorgen dat alle afbeeldingen alle beschikbare ruimte innemen, de verhouding behouden en geen bezuinigingen:

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

Antwoord 6, autoriteit 3%

Verwijder de eigenschap “height”.

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

Door beide op te geven, wijzigt u de beeldverhouding van de afbeelding. Als je er één instelt, wordt het formaat aangepast, maar blijft de beeldverhouding behouden.

Optioneel, om overmaten te beperken:

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

Antwoord 7, autoriteit 2%

Firefox 71+ (2019-12-03 ) en Chrome 79+ (2019-12-10) ondersteunen interne toewijzing van de width en height HTML-attributen van het IMG-element naar het nieuwe aspect-ratio CSS-eigenschap (de eigenschap zelf is nog niet beschikbaar voor direct gebruik).

De berekende beeldverhouding wordt gebruikt om ruimte te reserveren voor de afbeelding totdat deze is geladen, en zolang de berekende beeldverhouding gelijk is aan de daadwerkelijke beeldverhouding van de afbeelding, wordt ‘springen’ van pagina’s voorkomen na het laden van de  afbeelding.

Om dit te laten werken, moet een van de twee afbeeldingsdimensies worden overschreven via CSS naar de waarde auto:

IMG {max-width: 100%; height: auto; }

<img src="example.png" width="1280" height="720" alt="Example" />

In het voorbeeld blijft de beeldverhouding van 16:9 (1280:720) behouden, zelfs als de afbeelding nog niet is geladen en de effectieve afbeeldingsbreedte kleiner is dan 1280 als resultaat van max-width: 100%.

Zie ook de gerelateerde Firefox bug 392261.

Antwoord 8

Hier is een oplossing:

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

Dit zorgt ervoor dat de afbeelding altijd de hele bovenliggende afbeelding bedekt (verkleinen en omhoog) en dezelfde beeldverhouding behouden.

Antwoord 9

Voeg dit gewoon toe aan je CSS, het zal automatisch krimpen en uitbreiden met behoud van de oorspronkelijke verhouding.

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

Antwoord 10

Stel de CSS-klasse van uw afbeeldingscontainertag in op image-class:

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

en voeg dit toe aan je CSS-stylesheet.

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

Antwoord 11

Als u een responsieve afbeelding wilt behouden en toch wilt afdwingen dat de afbeelding een bepaalde beeldverhouding heeft, kunt u het volgende doen:

HTML:

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

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

Dit kan worden gebruikt om een ​​bepaalde beeldverhouding af te dwingen, ongeacht de grootte van de afbeelding die auteurs uploaden.

Met dank aan @Kseso op http://codepen.io/Kseso/pen/bfdhg . Check deze URL voor meer ratio’s en een werkend voorbeeld.

Antwoord 12

Als u afbeeldingen wilt forceren die in een exact formaat passen, hoeft u niet te veel codes te schrijven. Het is zo eenvoudig

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="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />

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

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

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

$(".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");
});

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"> 

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

img[data-attribute] {height: 100vh;}

transform: scaleX(1.2);

transform: scaleY(1.2);

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