Pregunta 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 (mantener 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:

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


93
2018-04-03 13:39


origen


Respuestas:


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

No, no hay una forma única de CSS para hacer esto en ambas direcciones. Usted podría agregar

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

Para el elemento an tener siempre un ancho del 100% y escalar automáticamente la altura a la relación de aspecto, o el inverso:

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

para escalar siempre a la altura máxima y el 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 hacerlo.

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 es que los elementos se renderizan y usted sabe exactamente qué tamaños y relaciones está tratando. La única forma de detectar eso es con JavaScript.


Aunque no está buscando una solución JS, la agregaré de todos modos si alguien la necesita. La forma más sencilla de manejar esto con JavaScript es agregar una clase basada en la diferencia en la proporción. Si la relación ancho / alto de la caja 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>


78
2018-04-03 14:04



¡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

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

150
2018-04-04 17:54



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, y así lo limitará al contenedor.

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


31
2017-10-30 09:07



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


18
2018-04-12 18:23



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


1
2018-04-03 13:45



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


Si se requiere el uso de un contenedor, entonces el ancho máximo y el alto máximo se pueden establecer en 100%:

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 así como:

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

1
2017-09-28 10:41



Puede lograr esto con CSS puro, tanto para imágenes verticales largas como horizontales largas al mismo nivel.

Aquí hay un fragmento que funciona en Chrome, Firefox y Safari (ambos usan 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>


1
2017-09-27 20:26



He usado 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 el cuadro, se muestra tal como está en el centro. A continuación, el código utiliza un ancho de 40 píxeles y un cuadro de 40 píxeles de altura. (No estoy 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>

0
2017-08-23 09:20



Este ejemplo para estirar la imagen proporcionalmente para adaptarse a toda la ventana. Una improvisación para el 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 si. El primero sigue comprobando si la altura de la imagen es menor que el div y se aplica .fillheight clase, mientras que el siguiente verifica el ancho y aplica .fillwidth clase. 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; 
}

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


0
2017-12-12 03:01



La forma más limpia y simple 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!


0
2018-05-26 22:18



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!


0
2018-02-07 20:36