Skalieren Sie das Bild so, dass es in eine Bounding Box passt

Dank CSS3 gibt es eine Lösung !

Die Lösung ist, um das Bild als background-image und legen Sie dann die background-size zu contain.

HTML

<div class='bounding-box'>
</div>

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Test gibt es hier: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=enthalten

Volle Kompatibilität mit den neuesten Browsern: http://caniuse.com/background-img-opts

Ausrichten, das div in der Mitte, können Sie mit dieser Variante:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

InformationsquelleAutor der Antwort Thomas Guillory

Heute nur sagen, object-fit: enthalten. Unterstützung ist alles, aber IE: http://caniuse.com/#feat=object-fit

InformationsquelleAutor der Antwort Glenn Maynard

Andere Lösung ohne Hintergrundbild und ohne die Notwendigkeit für einen Behälter (obwohl die max Größe der bounding box bekannt sein muss):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

Wenn ein container die Nutzung erforderlich ist, dann ist die max-width und max-height kann auf 100% gesetzt werden:

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

Für dieses Sie hätte so etwas wie:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

InformationsquelleAutor der Antwort xerxeArt

Diesem Beispiel um das Bild zu Strecken proportional zu passen, das gesamte Fenster.
Eine improvisation über richtige code hinzufügen $( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

Gibt es zwei if-Bedingungen. Die erste hält man überprüfen, ob die Höhe des Bildes ist kleiner als das div und gilt .fillheight Klasse, während die nächsten Prüfungen für die Breite und gilt .fillwidth Klasse.
In beiden Fällen ist die andere Klasse ist entfernt mit .removeClass()

Hier ist der CSS -

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

Können Sie ersetzen 100vh durch 100% wenn Sie wollen, Strecken das Bild in eine div. In diesem Beispiel des Bildes proportional zu passen, das gesamte Fenster.

InformationsquelleAutor der Antwort Mr. JCRP

Dies hat mir geholfen:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

Dann auf das element (Sie können die Nutzung von javascript oder media queries hinzufügen Reaktionsfähigkeit):

<div class='img-class' style='transform: scale(X);'></div>

Hoffe, das hilft!

InformationsquelleAutor der Antwort bman93

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

Bin ich Editier meine Antwort weiter zu erklären, meine Lösung, als ich habe einen down-vote.

Mit den Formatvorlagen einstellen, wie oben gezeigt, in css nun folgenden html-div wird das Bild immer passen Breite Weise und passen Sie Höhe-Seitenverhältnis auf Breite. Also Bild wird passend skalieren eine bounding box als gefragt, in Frage stellen.

<div class="boundingbox"><img src="image.jpg"/></div>

InformationsquelleAutor der Antwort zeeawan