Escalar la imagen para que se ajuste a un cuadro delimitador

¿Existe una solución de solo CSS para escalar una imagen en un cuadro delimitador (manteniendo la relación de aspecto)? Esto funciona si la imagen es más grande que el contenedor:

img {
  max-width: 100%;
  max-height: 100%;
}

Ejemplo:

• Caso de uso 1 (funciona): http://jsfiddle.net/Jp5AQ/2/
• Caso de uso 2 (funciona): http://jsfiddle.net/Jp5AQ/3/

Pero quiero escalar la imagen hasta que una dimensión sea el 100% del contenedor.

• Caso de uso 3 (no funciona): http://jsfiddle.net/Jp5AQ/4/

Nota: aunque esta es la respuesta aceptada, la respuesta a continuación es más precisa y actualmente es compatible con todos los navegadores si tiene la opción de usar una imagen de fondo.

No, no existe una única forma de CSS para hacer esto en ambas direcciones. Podrías agregar

.fillwidth {
    min-width: 100%;
    height: auto;
}

Para que un elemento tenga siempre un ancho del 100% y escale automáticamente la altura a la relación de aspecto, o a la inversa:

.fillheight {
    min-height: 100%; 
    width: auto;
}

para escalar siempre a la altura máxima y al ancho relativo. Para hacer ambas cosas, deberá determinar si la relación de aspecto es mayor o menor que su contenedor, y CSS no puede hacer esto.

La razón es que CSS no sabe cómo se ve la página. Establece reglas de antemano, pero solo después de eso, los elementos se renderizan y usted sabe exactamente con qué tamaños y proporciones está tratando. La única forma de detectarlo es con JavaScript.

Aunque no está buscando una solución JS, agregaré una de todos modos si alguien la necesita. La forma más fácil de manejar esto con JavaScript es agregar una clase basada en la diferencia de proporción. Si la relación ancho-alto del cuadro es mayor que la de la imagen, agregue la clase "fillwidth", de lo contrario agregue la clase "fillheight".

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

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

¡Gracias a CSS3 hay una solución!

La solución es poner la imagen como background-imagea continuación, establecer el background-sizea 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

Total compatibilidad con los últimos navegadores: http://caniuse.com/background-img-opts

Para alinear el div en el centro, puede usar esta 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 pirateada que descubrí:

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

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

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

Ejemplo interactivo:

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

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

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

Puede lograr esto con CSS puro y soporte completo del navegador, tanto para imágenes de longitud vertical como horizontal al mismo tiempo.

Aquí hay un fragmento que funciona en Chrome, Firefox y Safari (ambos usándolo object-fit: scale-downy 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>

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>

Este ejemplo para estirar la imagen proporcionalmente para que se ajuste a toda la ventana. Una improvisación del 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 .fillheightclase, mientras que el siguiente comprueba el ancho y aplica la .fillwidthclase. 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 100vhpor 100%si desea estirar la imagen en un div. Este ejemplo para estirar la imagen proporcionalmente para que se ajuste a toda la ventana.

¿Está 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.

He usado una 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 el cuadro, se muestra como está en el centro. El siguiente código utiliza un cuadro de 40 píxeles de ancho y 40 píxeles de alto. (No estoy muy seguro de qué tan bien 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>

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

Primero algo de 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 funcionar!

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 consultas de medios 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 en contra.

Con los estilos configurados 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 alto al ancho. Por lo tanto, la imagen se escalará para ajustarse a un cuadro delimitador como se pide en la pregunta.

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