¿Cómo se redimensiona automáticamente una imagen grande para que quepa en un contenedor div de menor ancho manteniendo 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.

No aplique un ancho o alto explícito a la etiqueta de la imagen. En cambio, dale:

max-width:100%;
max-height:100%;

Además, height: auto;si desea especificar solo un ancho.

Ejemplo: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

ajuste de objeto

Resulta que hay otra forma de hacer esto.

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

Hará el trabajo. Es CSS 3 cosas.

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

Actualmente no hay forma de hacer esto correctamente de una manera determinista, con imágenes de tamaño fijo como archivos JPEG o PNG.

Para cambiar el tamaño de una imagen proporcionalmente, usted tiene que fijar bien la altura o anchura a "100%", pero no ambos. Si establece ambos en "100%", su imagen se estirará.

La elección de la altura o el ancho depende de la imagen y las dimensiones del contenedor:

1. Si la imagen y el contenedor tienen "forma de retrato" o "forma de paisaje" (más altos que anchos o más anchos, respectivamente), entonces no importa cuál altura o ancho sean "% 100" .
2. Si su imagen es vertical y su contenedor es horizontal, debe configurarla height="100%"en la imagen.
3. Si su imagen es horizontal y su contenedor es vertical, debe establecerla width="100%"en la imagen.

Si su imagen es un SVG, que es un formato de imagen vectorial de tamaño variable, puede hacer que la expansión se ajuste automáticamente al contenedor.

Solo tiene que asegurarse de que el archivo SVG no tenga ninguna de estas propiedades establecidas en la <svg>etiqueta:

height
width
viewbox

La mayoría de los programas de dibujo vectorial establecerán estas propiedades al exportar un archivo SVG, por lo que tendrá que editar manualmente su archivo cada vez que exporte, o escribir un script para hacerlo.

Aquí hay una solución que alineará vertical y horizontalmente su img dentro de un div sin ningún estiramiento, incluso si la imagen suministrada 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 de jQuery:

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

¡Hazlo simple!

Dale al contenedor un fijo height y luego, por la imgetiqueta dentro de él, establece widthy max-height.

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

La diferencia es que establece el width100%, no el max-width.

Un hermoso truco.

Tiene 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(http://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>

Ejecútalo aquí

2. Cuando la imagen está en la imgetiqueta.

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Ejecútalo aquí

Puede establecer la imagen como fondo en un div y luego usar la propiedad de tamaño de fondo CSS :

background-size: cover;

Será "Escala la imagen de fondo a ser tan grande como sea posible para que el área de fondo se cubre totalmente la imagen de fondo de algunas partes de la imagen de fondo pueden no estar a la vista dentro de la zona de fondo de posicionamiento." - W3Schools

Mira mi solución: http://codepen.io/petethepig/pen/dvFsA

Está escrito en CSS puro, sin ningún código JavaScript. Puede manejar imágenes de cualquier tamaño y orientación.

Dado tal HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

el código CSS sería:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Acabo de publicar un complemento jQuery que hace exactamente lo que necesita con muchas opciones:

https://github.com/GestiXi/image-scale

Uso:

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

Esta solución no estira la imagen y llena todo el contenedor, pero corta parte de la imagen.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

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

Veo que muchas personas han sugerido el ajuste de objetos, que es una buena opción. Pero si también quiere que funcione en navegadores antiguos , hay otra forma de hacerlo fácilmente.

Es bastante simple. El enfoque que tomé fue colocar la imagen dentro del contenedor con absoluta y luego colocarla justo en el centro usando la combinación:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Una vez que está en el centro, le doy a la imagen,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Esto hace que la imagen tenga el efecto de Object-fit: cover.

Aquí hay una demostración de la lógica anterior.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Esta lógica funciona en todos los navegadores.

Lo siguiente funciona perfectamente para mí:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Tengo una solución mucho mejor sin necesidad de JavaScript. Es totalmente sensible y lo uso mucho. A menudo necesita ajustar una imagen de cualquier relación de aspecto a un elemento contenedor con una relación de aspecto especificada. Y tener todo esto completamente receptivo es imprescindible.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Puede establecer max-width y max height independientemente; la imagen respetará la más pequeña (según los valores y la relación de aspecto de la imagen). También puede configurar la imagen para que se alinee como desee (por ejemplo, para una imagen del producto sobre un fondo blanco infinito, puede colocarla en el centro de la parte inferior fácilmente).

Dé el alto y el ancho que necesita para su imagen al div que contiene la etiqueta <img>. No olvide dar la altura / anchura en la etiqueta de estilo adecuada.

En la etiqueta <img>, ingrese max-heighty max-widthcomo 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Puede agregar los detalles en las clases apropiadas después de hacerlo correctamente.

El siguiente código está adaptado de respuestas anteriores y lo probé usando una imagen llamada storm.jpg.

Este es el código HTML completo para una página simple que muestra la imagen. Esto funciona perfecto y lo probé con www.resizemybrowser.com. Coloque el código CSS en la parte superior de su código HTML, debajo de la sección de la cabeza. Ponga el código de la imagen donde desee la imagen.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Tienes que decirle al navegador la altura de dónde lo estás colocando:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Editar: el posicionamiento de imágenes basado en tablas anterior tenía problemas en Internet Explorer 11 ( max-heightno funciona en display:tableelementos). Lo he reemplazado con un posicionamiento basado en línea que no solo funciona bien tanto en Internet Explorer 7 como en Internet Explorer 11, sino que también requiere menos código.

Aquí está mi opinión sobre el tema. Solo funcionará si el contenedor tiene un tamaño específico ( max-widthy max-heightno parece llevarse bien con los contenedores que no tienen un tamaño concreto), pero escribí el contenido CSS de una manera que permite su reutilización (agregar picture-frameclase y px125clase de tamaño a su contenedor existente).

En CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

Y en HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

MANIFESTACIÓN

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Editar: Posible mejora adicional usando JavaScript (imágenes de aumento de escala):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Solucioné este problema usando el siguiente código:

<div class="container"><img src="image_url" /></div>

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

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Como se respondió aquí , también puede usar vhunidades en lugar de max-height: 100%si no funciona en su navegador (como Chrome):

img {
    max-height: 75vh;
}

Centré y escalé proporcionalmente una imagen dentro de un hipervínculo tanto horizontal como verticalmente de esta manera:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Fue probado en Internet Explorer, Firefox y Safari.

Más información sobre el centrado está aquí .

La respuesta aceptada de Thorn007 no funciona cuando la imagen es demasiado pequeña .

Para resolver esto, agregué un factor de escala . De esta manera, aumenta la imagen y llena el contenedor div.

Ejemplo:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Notas:

1. Para WebKit debe agregar -webkit-transform:scale(4); -webkit-transform-origin:left top;el estilo.
2. Con un factor de escala de 4, tiene max-width = 400/4 = 100 y max-height = 200/4 = 50
3. Una solución alternativa es establecer el ancho máximo y la altura máxima al 25%. Es aún más simple.

Si está utilizando Bootstrap, solo necesita agregar la img-responsiveclase a la imgetiqueta:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Imágenes de Bootstrap

A continuación, se encuentra una solución simple (¡solución de 4 pasos!) Que parece funcionar para mí. El ejemplo usa el ancho para determinar el tamaño general, pero también puede voltearlo para usar la altura.

1. Aplique estilo CSS al contenedor de imágenes (por ejemplo, <img>)
2. Establezca la propiedad de ancho a la dimensión que desee
   • Para dimensiones, use %para tamaño relativo o autoescalado (según el contenedor o la pantalla de la imagen)
   • Usar px(u otro) para una dimensión estática o establecida
3. Establezca la propiedad de altura para ajustar automáticamente, según el ancho
4. ¡DISFRUTAR!

Por ejemplo,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Todas las respuestas proporcionadas, incluida la aceptada, funcionan solo bajo el supuesto de que el divcontenedor es de un tamaño fijo. Así es como se hace, sea cual sea el tamaño del divcontenedor, y esto es muy útil si desarrolla una página receptiva:

Escriba estas declaraciones dentro de su DIVselector:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Luego ponga estas declaraciones dentro de su IMGselector:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

MUY IMPORTANTE:

El valor de maxHeightdebe ser el mismo para los selectores DIVy IMG.

Una solución simple es usar flexbox. Defina el CSS del contenedor para:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Ajuste el ancho de la imagen contenida al 100% y debería obtener una buena imagen centrada en el contenedor con las dimensiones preservadas.

La solución es fácil con un poco de matemática ...

Simplemente coloque la imagen en un div y luego en el archivo HTML donde especifique la imagen. Establezca los valores de ancho y alto en porcentajes utilizando los valores de píxeles de la imagen para calcular la relación exacta de ancho a alto.

Por ejemplo, supongamos que tiene una imagen que tiene un ancho de 200 píxeles y una altura de 160 píxeles. Puede decir con seguridad que el valor del ancho será del 100%, porque es el valor más grande. Para calcular el valor de la altura, simplemente divida la altura por el ancho, lo que da el valor porcentual del 80%. En el código se verá más o menos así ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

La forma más sencilla de hacer esto es mediante el uso de object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Si está utilizando Bootstrap, simplemente agregue la img-responsiveclase y cambie a

.container img{
    object-fit: cover;
}

Comprobar mi respuesta, hacer una imagen sensible - forma más sencilla -

img{
    width: 100%;
    max-width: 800px;
}

O simplemente puede usar:

background-position:center;
background-size:cover;

Ahora la imagen ocupará todo el espacio del div.