Pregunta ¿Cómo cambio automáticamente el tamaño de una imagen para que se ajuste a un contenedor div?


¿Cómo se cambia automáticamente el tamaño de una imagen de gran tamaño para que quepa en un contenedor Div de ancho más pequeño manteniendo su relación de ancho y 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 automáticamente de tamaño.


1078
2018-06-12 17:00


origen


Respuestas:


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

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

También, height: auto; si solo quieres especificar 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>


1436
2018-06-12 17:03



https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

resulta que hay otra manera de hacer esto.

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

hará el trabajo. Es cosas de CSS3.

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


237
2018-06-12 02:48



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

Para cambiar el tamaño de una imagen proporcionalmente, debe establecer ya sea la altura o el ancho a "100%", pero no ambos. Si configura ambos en "100%", su imagen se alargará.

Elegir si se debe hacer alto o ancho depende de las dimensiones de tu imagen y contenedor:

  1. Si su imagen y contenedor son "en forma de retrato" o ambos "en forma de paisaje" (más altos que son anchos, o más anchos que altos, respectivamente), entonces no importa cuál de alto o ancho sea "% 100" .
  2. Si su imagen es vertical y su contenedor es horizontal, debe configurar height="100%" en la imagen.
  3. Si su imagen es horizontal y su contenedor es vertical, debe configurar 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 para adaptarse al contenedor se realice automáticamente.

Solo tiene que asegurarse de que el archivo SVG no tenga ninguna de estas propiedades configuradas en <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 lo exporte, o escribir un script para hacerlo.


93
2018-06-11 20:13



Aquí hay una solución que alineará verticalmente y 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 html:

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

El CSS:

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

El JQuery:

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

Espero que esto les ayude chicos


65
2017-10-04 09:40



¡Hazlo simple!

Dale al contenedor un fijo  height y luego para el img etiqueta dentro de ella establece width y max-height.

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

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


37
2017-09-25 08:45



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

Está escrito en CSS puro, sin ningún código JS. Puede manejar imágenes de cualquier tamaño y cualquier 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;
}

19
2018-06-28 18:26



Puede establecer la imagen como fondo de un div, luego use la css de tamaño de fondo de la propiedad 

background-size: cover;

y "Escalará la imagen de fondo para que sea lo más grande posible, de modo que el área de fondo quede completamente cubierta por la imagen de fondo. Algunas partes de la imagen de fondo pueden no estar visibles en el área de posicionamiento de fondo" -w3schools.com


17
2017-12-16 12:37



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, ya que es mejor que background-image en términos de SEO como puedes escribir palabra clave en el alt del img etiqueta. Así que aquí puede hacer que la imagen responda.

  1. 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í


12
2018-02-21 07:45



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

}

9
2017-08-07 11:54



Acabo de publicar un plugin 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>

JS

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

8
2017-08-06 15:31



Tengo una solución mucho mejor sin necesidad de ningún JS. Es totalmente receptivo y lo uso mucho. A menudo necesita ajustar la imagen de cualquier relación de aspecto al elemento contenedor con la 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 el ancho máximo y la altura máxima de forma independiente, 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 lo desee (por ejemplo, para la imagen del producto sobre fondo blanco infinito, puede colocarla en el centro de la parte inferior con facilidad)


6
2018-01-13 19:00