¿Cómo retiro automáticamente una imagen para que se ajuste a un contenedor 'div'?

Question

¿Cómo se actualiza automáticamente una imagen grande para que se ajuste a un recipiente DIV de ancho más pequeño mientras mantiene su relación ancho: altura?

---

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 se redimensiona automáticamente.

Answer 1

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

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

También, 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>

Answer 2

ajuste de objeto

Resulta que hay otra forma de hacer esto.

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

hará el trabajo. Son cosas de CSS 3.

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

Answer 3

Actualmente no hay forma de hacerlo correctamente de manera determinista, con imágenes de tamaño fijo como JPEGS o archivos PNG.

Para cambiar el tamaño de una imagen proporcionalmente, debe configurar o La altura o el ancho de "100%", pero no ambos. Si establece ambos en "100%", su imagen se estirará.

Elegir si hacer altura o ancho depende de su imagen y dimensiones del contenedor:

1. Si su imagen y contenedor están "en forma de retrato" o ambos "en forma de paisaje" (más altos de lo que son ancho o más ancho de lo que son altos, respectivamente), entonces no importa cuál de la altura o el ancho son "%100" .
2. Si su imagen es retrato y su contenedor es un paisaje, debe establecer height="100%" en la imagen.
3. Si su imagen es paisajista y su contenedor es retrato, debe establecer 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 al contenedor ocurre automáticamente.

Solo tiene que asegurarse de que el archivo SVG no tenga ninguna de estas propiedades establecidas en el <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 deberá editar manualmente su archivo cada vez que exporte o escribir un script para hacerlo.

Answer 4

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 de 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);
    }

Answer 5

¡Hazlo simple!

Dale al contenedor un fijado height Y luego para el img Etiqueta dentro de él, establecido width y max-height.

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

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

Answer 6

Un hermoso truco.

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(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>

Ejecutarlo aquí

---

Pero uno debería usar img etiqueta para poner imágenes 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í es que 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="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Ejecutarlo aquí

Answer 7

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 cualquier orientación.

Dado dicho 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;
}

Answer 8

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

background-size: cover;

Va a "Escala la imagen de fondo para que sea lo más grande posible para que el área de fondo esté completamente cubierta por la imagen de fondo. Algunas partes de la imagen de fondo pueden no estar a la vista dentro del área de posicionamiento de fondo" -- W3Schools

Answer 9

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();
});

Answer 10

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

Answer 11

Lo siguiente funciona perfectamente para mí:

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

Answer 12

Tengo una solución mucho mejor sin necesidad de JavaScript. Es completamente receptivo 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 configurar el ancho máximo y la altura máxima de forma independiente; La imagen respetará la más pequeña (dependiendo de los valores y la relación de aspecto de la imagen). También puede establecer la imagen para alinearse como desee (por ejemplo, para una imagen de producto en un fondo blanco infinito, puede colocarla para centrar el fondo fácilmente).

Answer 13

Dé la altura y el ancho que necesita para su imagen al Div que contiene elu003Cimg> etiqueta. No olvide dar la altura/ancho en la etiqueta de estilo adecuada.

En elu003Cimg> etiqueta, dale al max-height y max-width como 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 bien.

Answer 14

El siguiente código está adaptado de respuestas anteriores y me prueba 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 fue probado por mí 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. Coloque el código de imagen donde quiera 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>

Answer 15

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

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

Answer 16

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 es aquí.

Answer 17

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, hace que la imagen sea más grande 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; en el estilo.
2. Con un factor de escala de 4, tiene un ancho máximo = 400/4 = 100 y max-hiech = 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.

Answer 18

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

Answer 19

Editar: El posicionamiento previo basado en la tabla tuvo problemas en Internet Explorer 11 (max-height no funciona en display:table elementos). 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-width y max-height no parece llevarse bien con contenedores que no tienen tamaño concreto), pero escribí el contenido de CSS de una manera que permita que se reutilice (agregue picture-frame clase y px125 clase 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 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) };
});

Answer 20

Como Respondido aquí, también puedes usar vh unidades en lugar de max-height: 100% Si no funciona en su navegador (como Chrome):

img {
    max-height: 75vh;
}

Answer 21

Veo que mucha gente es sugerencia ajuste de objeto que es una buena opción. Pero si quieres es trabajar en navegadores mayores también, hay otra forma de hacerlo fácilmente.

Por favor, consulte mi respuesta aquí:Es decir y arreglos de borde para el ajuste de objeto: cubierta;

Es bastante simple. El enfoque que tomé fue colocar la imagen dentro del contenedor con absoluto y entonces colóquelo 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, 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 obtenga el efecto de objetos de ajuste: cubierta.

---

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

https://jsfiddle.net/furqan_694/s3xle1gp/

Esta lógica funciona en todos los navegadores.

Answer 22

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

1. Aplicar el estilo CSS al contenedor de imagen (por ejemplo,u003Cimg> )
2. Establezca la propiedad de ancho en la dimensión que desee
   • Para dimensiones, use % para un tamaño relativo o autoscalado (basado en el contenedor o pantalla de imagen)
   • Usar px (u otro) para una dimensión estática o establecida
3. Establezca la propiedad de altura para que se ajuste automáticamente, en función del ancho
4. ¡DISFRUTAR!

Por ejemplo,

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

Answer 23

Todas las respuestas proporcionadas, incluido el aceptado, el trabajo solamente bajo la suposición de que el div El envoltorio es de un tamaño fijo. Entonces esto es como hacerlo lo que sea el tamaño del div Wrapper es y esto es muy útil si desarrolla una página receptiva:

Escribe estas declaraciones dentro de tu DIV selector:

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 IMG selector:

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

MUY IMPORTANTE:

El valor de maxHeight debe ser el mismo para ambos DIV y IMG selectores.

Answer 24

Arreglé 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%;
}

Answer 25

Una solución simple es usar FlexBox. Defina el CSS del contenedor a:

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

Ajuste el ancho de la imagen contenido al 100% y debe obtener una buena imagen centrada en el contenedor con las dimensiones conservadas.

Answer 26

If you're using Bootstrap, you just need to add the img-responsive class to the img tag:

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

Bootstrap Images

Answer 27

The solution is easy with a bit of maths...

Just put the image in a div and then in the HTML file where you specify the image. Set the width and height values in percentages using the pixel values of the image to calculate the exact ratio of width to height.

For example, say you have an image that has a width of 200 pixels and a height of 160 pixels. You can safely say that the width value will be 100%, because it is the larger value. To then calculate the height value you simply divide the height by the width which gives the percentage value of 80%. In the code it will look something like this...

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

Answer 28

Check my answer, Make an image responsive - simplest way -

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

Answer 29

The simplest way to do this is by using object-fit:

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

.container{
   height: 300px;
}

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

If you're using Bootstrap, just add the img-responsive class and change to

.container img{
    object-fit: cover;
}

Answer 30

Or you can simply use:

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

Now the image will take all the space of the div.