html - hacer - div con imagen de fondo responsive

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

Question

¿Cómo se ajusta automáticamente el tamaño de una imagen grande para que quepa en un contenedor div de ancho más pequeño a la vez que 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 ajustarse a la página, la imagen se redimensiona automáticamente.

Answer 1

¡Hazlo simple!

Asigne al contenedor una height fija y luego, para la etiqueta img dentro, establezca el width y max-height .

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

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

Answer 2

A continuación se muestra una solución simple (¡solución de 4 pasos!) Que parece funcionar para mí. Espero que te ayude. El ejemplo utiliza el ancho para determinar el tamaño general, pero también puedes voltearlo para usar la altura.

1. Aplique el estilo CSS al contenedor de imágenes (por ejemplo,
2. establecer la propiedad de ancho a la dimensión que desee
   • para las dimensiones use% para el tamaño relativo, o la escala automática (basada en el contenedor o la imagen) - use px (u otro) para una dimensión estática o establecida
3. establecer la propiedad de altura para ajustar automáticamente, basado en el ancho
4. ¡DISFRUTAR!

por ejemplo

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

Answer 3

Acabo de publicar un complemento de 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();
});

Answer 4

Actualmente no hay manera 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, debe establecer la altura o el ancho en "100%", pero no ambos. Si configura ambos en "100%", su imagen se estirará.

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

1. Si su imagen y el contenedor tienen "forma de retrato" o "forma de paisaje" (más altos que son anchos, o más anchos que son altos, respectivamente), no importa cuál de alto o ancho sea "% 100" .
2. Si su imagen es vertical y su contenedor es horizontal, debe establecer la height="100%" en la imagen.
3. Si su imagen es horizontal y su contenedor es vertical, debe establecer el 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 debe asegurarse de que el archivo SVG no tenga ninguna de estas propiedades establecidas en la etiqueta <svg> :

height
width
viewbox

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

Answer 5

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

La 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 a ustedes

Answer 6

Centré y escale 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;
}

Probado en IE, Firefox, Safari.

Más información sobre el centrado está here .

Answer 7

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

img {
    max-height: 75vh;
}

Answer 8

Define div simplemente

   div.headerimg1 {
       position: absolute;
       top: 290px;
       left: 81px;
       width: 389px;
            height: 349px;
}
<div class="headerimg1">
<img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;
display:inline;"></div>

Answer 9

Dele la altura y el ancho que necesita para su imagen al div que contiene la etiqueta <img>. No te olvides de dar la altura / anchura en la etiqueta de estilo adecuado. En la etiqueta <img>, indique la altura máxima y la anchura máxima 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 una vez que lo hizo bien.

Answer 10

Echa un vistazo a 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;
}

Answer 11

El código de abajo está adaptado desde arriba y probado por mí usando una imagen llamada storm.jpg Este es el código HTML completo para una página simple que muestra la imagen. Esto funciona perfectamente 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 principal. Ponga el código de la imagen donde quiera que 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>

Answer 12

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 13

La forma más sencilla de hacer esto es

utilizando el ajuste de objetos

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

.container{
   height: 300px;
}

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

Si está usando bootstrap, simplemente agregue la clase img-responsive y cambie a

.container img{
      object-fit: cover;
    }

Answer 14

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: parte superior izquierda; en el estilo
2 / con un factor de escala de 4, tiene un ancho máximo = 400/4 = 100 y una altura máxima = 200/4 = 50
3 / una solución alternativa es establecer el ancho máximo y la altura máxima en 25%, es incluso más simple

Answer 15

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

Simplemente coloque la imagen en un div y luego en el archivo html donde especifica la imagen, establezca los valores de ancho y alto en porcentajes usando los valores de píxeles de la imagen para calcular la proporció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 luego calcular el valor de altura, simplemente divida la altura por el ancho que da el valor de porcentaje del 80%. En el código se verá algo como esto ...

Answer 16

Lo siguiente funciona perfectamente para mí:

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

Answer 17

No aplique un ancho o una altura explícitos a la etiqueta de la imagen. En su lugar, dale:

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

Además, height: auto; Si desea especificar un ancho solamente.

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 18

O simplemente puede utilizar:

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

Ahora la imagen tomará todo el espacio de la div.

Answer 19

Puede configurar la imagen como fondo para un div, luego usar la propiedad css background-size

background-size: cover;

y "Escala la imagen de fondo para que sea lo más grande posible para que el área de fondo quede completamente cubierta por la imagen de fondo. Es posible que algunas partes de la imagen de fondo no estén a la vista dentro del área de posicionamiento de fondo" -w3schools.com

Answer 20

Tengo una solución mucho mejor sin necesidad de ningún JS. Es totalmente sensible y lo uso mucho. A menudo es necesario ajustar la imagen de cualquier relación de aspecto al elemento contenedor con una relación de aspecto específica. Y tener todo esto completamente sensible es una necesidad.

/* 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 desee (por ejemplo, para una imagen del producto en un fondo blanco infinito puede colocarla en la parte inferior central fácilmente)

Answer 21

Tienes que decirle al navegador la altura de donde lo estás colocando.

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

Answer 22

Todas las respuestas proporcionadas, incluida la aceptada, funcionan solo bajo el supuesto de que la envoltura div es de un tamaño fijo. Entonces, esta es la forma de hacerlo, sea cual sea el tamaño del envoltorio div y esto es muy útil si desarrolla una página receptiva:

Escribe estas declaraciones dentro de tu selector DIV :

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

width : "100%" /* obligatory */
max-height :  anyValueYouWant /*(in px or %)*/ 

MUY IMPORTANTE:

El valor de maxHeight debe ser el mismo para los selectores DIV e IMG .

Answer 23

Una solución simple es utilizar flex-box. Defina el CSS del contenedor para:

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

Ajusta el ancho de la imagen contenida al 100% y obtendrás una buena imagen centrada en el contenedor con las dimensiones conservadas. Aclamaciones.

Answer 24

revisa mi ans https://.com/a/36712112/2439715

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

Answer 25

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.

Fiddle: http://jsfiddle.net/mbHB4/7364/

Answer 26

Edición: la posición de la imagen basada en la tabla anterior tenía problemas en IE11 ( max-height no funciona en la display:table elementos de la display:table ). Lo he reemplazado con posicionamiento basado en línea que no solo funciona bien en IE7 e IE11, 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 max-height no parecen llevarse bien con los contenedores que no tienen un tamaño concreto), pero escribí el css de una manera que permite que sea reutilizado (agregue la clase de picture-frame clase de tamaño px125 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 imgs enclosed in anchors in IE */
}

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 imgs enclosed in anchors in IE */
}

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

Edición: Posible mejora adicional utilizando JS (ampliación de imágenes):

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 27

Un hermoso truco.

Tienes dos formas de hacer que la imagen sea sensible.

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 here

Pero uno debería usar la etiqueta img para poner imágenes, ya que es mejor que background-image de background-image en términos de SEO, ya que puede escribir palabras clave en la etiqueta alt de la etiqueta img . Así que aquí puedes hacer que la imagen responda.

2. Cuando la imagen está en img tag.

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

Answer 28

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