Escala la imagen para ajustarla a un cuadro delimitador

Gracias a CSS3 hay una solución !

La solución es poner la imagen como background-image y luego establecer el background-size a contain.

HTML

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

CSS

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

Pruébelo aquí: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Compatibilidad total con los últimos navegadores: http://caniuse.com/background-img-opts

Para alinear el div en el centro, puede usar esto variación:

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

Aquí hay una solución hackish que descubrí:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

Esto ampliará la imagen diez veces, pero la restringirá al 10% de su tamaño final, limitándola así al contenedor.

A diferencia de la solución background-image, esto también funcionará con elementos <video>.

Hoy, solo di object-fit: contain. El soporte es todo menos IE: http://caniuse.com/#feat=object-fit

¿Estás buscando escalar hacia arriba pero no hacia abajo?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

Sin embargo, esto no bloquea la relación de aspecto.

Otra solución sin imagen de fondo y sin la necesidad de un contenedor (aunque se deben conocer los tamaños máximos del cuadro delimitador):

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

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

Para esto tendrías algo como:

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

Puede lograr esto con CSS puro, tanto para imágenes verticalmente largas como horizontalmente largas al mismo tiempo.

Aquí hay un fragmento que funciona en Chrome, Firefox y Safari (ambos usando object-fit: scale-down y sin usarlo):

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}

Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

Html:

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

Css:

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


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

He utilizado la tabla para centrar la imagen dentro de la caja. Mantiene la relación de aspecto y escala la imagen de una manera que está totalmente dentro de la caja. Si la imagen es más pequeña que la caja, entonces se muestra como está en el centro. El siguiente código utiliza una caja de 40px de ancho y 40px de altura. (No estoy muy seguro de lo bien que funciona porque lo eliminé de otro código más complejo y lo simplifiqué un poco)

CSS:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Este ejemplo para estirar la imagen proporcionalmente para adaptarse a toda la ventana. Una improvisación al código correcto anterior es agregar $( 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();
});

Hay dos condiciones if. El primero sigue comprobando si la altura de la imagen es menor que el div y aplica la clase .fillheight mientras que el siguiente comprueba el ancho y aplica la clase .fillwidth. En ambos casos la otra clase se elimina usando .removeClass()

Aquí está el CSS

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

Puede reemplazar 100vh por 100% si desea estirar la imagen con en un div. Este ejemplo para estirar la imagen proporcionalmente para adaptarse a toda la ventana.

La forma más limpia y sencilla de hacer esto:

Primero algunos CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

El HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

Esto debería hacer el truco!

Esto me ayudó:

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

Luego en el elemento (puede usar javascript o media queries para agregar capacidad de respuesta):

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

Espero que esto ayude!

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

Estoy editando mi respuesta para explicar más mi solución ya que tengo un voto negativo.

Con los estilos establecidos como se muestra arriba en css, ahora el siguiente div html mostrará que la imagen siempre se ajusta al ancho y ajustará la relación de aspecto alta al ancho. Por lo tanto, la imagen se escalará para ajustarse a un cuadro delimitador como se preguntó en la pregunta.

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