¿Cómo ajusto una imagen (img) dentro de un div y mantengo la relación de aspecto?

Tengo un div 48x48 y dentro de él hay un elemento img, quiero encajarlo en el div sin perder ninguna parte, mientras tanto se mantiene la relación, ¿se puede lograr con html y css?

Necesitará JavaScript para evitar recortes si no conoce la dimensión de la imagen en el momento en que escribe el CSS.

HTML y JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Si utiliza una biblioteca de JavaScript, puede aprovecharla.

Úselo max-height:100%; max-width:100%;para la imagen dentro del div.

Desafortunadamente max-width + max-height no cubren completamente mi tarea ... Así que he encontrado otra solución:

Para guardar la relación de imagen mientras se escala, también puede usar la object-fitpropiedad CSS3.

Artículo útil: Controle las relaciones de aspecto de la imagen con CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Malas noticias: IE no es compatible ( ¿Puedo usarlo? )

Usando solo CSS:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Esto hará que la imagen se expanda para llenar su padre, cuyo tamaño se establece en el divCSS.

Estaba teniendo muchos problemas para que esto funcionara, cada solución que encontré no parecía funcionar.

Me di cuenta de que tenía que configurar la pantalla div para flexionar, así que básicamente este es mi CSS:

div{
display: flex;
}

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

Prueba CSS:

img {
  object-fit: cover;
  height: 48px;
}

Para mí, el siguiente CSS funcionó (probado en Chrome, Firefox y Safari).

Hay varias cosas trabajando juntas:

• max-height: 100%;, max-width: 100%;y height: auto;, width: auto;haga la escala img a la dimensión que primero llegue al 100% manteniendo la relación de aspecto
• position: relative;en el contenedor y position: absolute;en el niño junto con top: 50%;y left: 50%;centrar la esquina superior izquierda de la img en el contenedor
• transform: translate(-50%, -50%); mueve el img hacia la izquierda y hacia arriba a la mitad de su tamaño, centrando así el img en el contenedor

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

Establecer la foto como imagen de fondo nos dará más control sobre el tamaño y la ubicación, dejando que la etiqueta img tenga un propósito diferente ...

A continuación, si queremos que el div tenga la misma relación de aspecto que la foto, placeholder.png es una pequeña imagen transparente con la misma relación de aspecto que photo.jpg. Si la foto es un cuadrado, es un marcador de posición de 1px x 1px, si la foto es una miniatura de video, es un marcador de posición de 16x9, etc.

Específico para la pregunta, use un marcador de posición 1x1 para mantener la relación cuadrada del div, con una imagen de fondo background-sizepara mantener la relación de aspecto de la foto.

Utilicé background-position: center center;para que la foto se centre en el div. (Alinear la foto en el centro vertical o inferior se pondría feo con la foto en la etiqueta img)

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

Para evitar una solicitud http adicional, convierta la imagen del marcador de posición a datos: URL .

<img src="data:image/png;base64,..."/>

puede usar la clase "img-fluid" para la versión más reciente, es decir, Bootstrap v4 .

y puede usar la clase "img-responsive" para versiones anteriores como Bootstrap v3 .

Uso : -

etiqueta img con: -

clase = "img-fluid"

src = "..."

Aquí hay un enfoque basado en JavaScript. Escala una imagen gradualmente hacia abajo hasta que encaje correctamente. Usted elige cuánto reducirlo cada vez que falla. Este ejemplo lo reduce un 10% cada vez que falla:

let fit = function (el, w, h, percentage, step)
{
    let newH = h;
    let newW = w;

    // fail safe
    if (percentage < 0 || step < 0) return { h: h, w: w };
    if (h > w)
    {
        newH = el.height() * percentage;
        newW = (w / h) * newH;
        if (newW > el.width())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }
    else
    {
        newW = el.width() * percentage;
        newH = (h / w) * newW;
        if (newH > el.height())
        {
            return fit(el, w, h, percentage - step, step);
        }
    }

    return { h: newH, w: newW };
};

img.bind('load', function ()
{
    let h = img.height();
    let w = img.width();
    let newFit = fit($('<img-wrapper-selector>'), w, h, 1, 0.1);

    img.width(newFit.w);
    img.height(newFit.h);
});

Siéntase libre de copiar y pegar directamente.

Lo que funcionó para mí fue:

<div style='display: inline-flex; width: 80px; height: 80px;'>
<img style='max-width: 100%; max-height: 100%' src='image file'>
</div>

Inline-flex fue necesario para evitar que las imágenes salgan del div.