Cómo cambiar automáticamente el tamaño de una imagen manteniendo la relación de aspecto

¿Cómo cambia automáticamente el tamaño de una imagen grande para que quepa en un contenedor div de ancho más pequeño mientras mantiene su relación ancho:alto?

Ejemplo: stackoverflow.com: cuando se inserta una imagen en el panel del editor y la imagen es demasiado grande para caber en la página, la imagen cambia de tamaño automáticamente.

Resulta que hay otra manera de hacer esto: object-fit.

<img style="height: 100%; width: 100%; object-fit: contain"/>

hará el trabajo. No olvide incluir otros atributos necesarios como src y altpor supuesto.

Violín: http://jsfiddle.net/mbHB4/7364/

Aquí hay una solución que alineará tanto vertical como horizontalmente su img dentro de un div sin ningún estiramiento, incluso si la imagen proporcionada es demasiado pequeña o demasiado grande para caber en el div.

El contenido HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

El contenido CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

La parte jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Tienes dos formas de hacer que la imagen responda.

1. Cuando una imagen es una imagen de fondo.

   #container{
       width: 300px;
       height: 300px;
       background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
   }
   
   <div id="container"><div>
   

   Ejecutarlo aquí

   Pero uno debe usar img etiqueta para poner imagenes como es mejor que background-image en términos de SEO como puedes escribir palabra clave en el alt del img etiqueta. Así que aquí puedes hacer que la imagen responda.

2. Cuando la imagen está en img etiqueta.

   #container{
       max-width: 400px;
       overflow: hidden;
   }
   img{
       width: 100%;
       object-fit: contain;
   }
   
   <div id="container">
       <img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
   <div>
   

   Ejecutarlo aquí

¡Hazlo simple!

Dale al recipiente un fijado height y luego por el img etiqueta dentro de él, establecer width y max-height.

<div style="height: 250px">
     <img src="https://stackoverflow.com/questions/3029422/..." alt=" " style="width: 100%;max-height: 100%" />
</div>

La diferencia es que usted establece el width ser 100%, no el max-width.