fit - ¿Cómo estirar una imagen para llenar un<div> mientras se mantiene la relación de aspecto de la imagen?

reduce size of image html

Question

Necesito hacer que esta imagen se estire al tamaño máximo posible sin desbordar su <div> o sesgar la imagen.

No puedo predecir la relación de aspecto de la imagen, por lo que no hay forma de saber si usar:

<img src="url" style="width: 100%;">

o

<img src="url" style="height: 100%;">

No puedo usar ambos (es decir, style = "width: 100%; height: 100%;") porque eso estirará la imagen para que se ajuste al <div> .

El <div> tiene un tamaño establecido por porcentaje de la pantalla, que también es impredecible.

Answer 1

Actualización 2016:

El navegador moderno se comporta mucho mejor. Todo lo que debe hacer es establecer el ancho de la imagen en 100% ( demo )

.container img {
   width: 100%;
}

Como no conoce la relación de aspecto, tendrá que usar algunas secuencias de comandos. Aquí es cómo lo haría con jQuery ( demo ):

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

Guión

$(window).load(function(){
 $(''.container'').find(''img'').each(function(){
  var imgClass = (this.width/this.height > 1) ? ''wide'' : ''tall'';
  $(this).addClass(imgClass);
 })
})

Answer 2

Eso es imposible solo con HTML y CSS, o al menos exótico y complicado. Si está dispuesto a arrojar algo de javascript, aquí hay una solución usando jQuery:

$(function() {
    $(window).resize(function() {
        var $i = $(''img#image_to_resize'');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

Eso redimensionará la imagen para que siempre se ajuste al elemento padre, independientemente de su tamaño. Y como está $(window).resize() evento $(window).resize() , cuando el usuario cambie el tamaño de la ventana, la imagen se ajustará.

Esto no intenta centrar la imagen en el contenedor, eso sería posible, pero supongo que eso no es lo que buscas.

Answer 3

Establezca el ancho y la altura del div container externo. Luego usa el estilo debajo de img:

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

Esto te ayudará a mantener una relación de aspecto de tu img

Answer 4

Esto hizo el truco para mí

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

Answer 5

Gracias a CSS3

img
{
   object-fit: contain;
}

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

IE y EDGE como siempre forasteros: http://caniuse.com/#feat=object-fit

Answer 6

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url(''path/to/image1.png'');">
<div id="bar" style="background-image: url(''path/to/image2.png'');">

JSFiddle

... Y si desea establecer o cambiar la imagen (usando #foo como ejemplo):

jQuery:

$("#foo").css("background-image", "url(''path/to/image.png'')");

JavaScript:

document.getElementById("foo").style.backgroundImage = "url(''path/to/image.png'')";

Answer 7

Hay una manera mucho más fácil de hacer esto usando solo CSS y HTML :

HTML:

<div class="fill"></div>

CSS:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url(''path/to/image.jpg'');
}

Esto colocará su imagen como fondo y la estirará para que se ajuste al tamaño div sin distorsión.

Answer 8

Me encontré con esta pregunta buscando un problema similar. Estoy creando una página web con diseño receptivo y el ancho de los elementos colocados en la página se establece en un porcentaje del ancho de la pantalla. La altura se establece con un valor vw.

Como estoy agregando publicaciones con PHP y un backend de base de datos, CSS puro estaba fuera de cuestión. Sin embargo, encontré la solución jQuery / javascript un poco difícil, así que se me ocurrió una solución ordenada (así me creo al menos).

HTML (o php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

Al usar style = "" es posible que PHP actualice mi página dinámicamente y el estilo CSS junto con style = "" terminará en una imagen perfectamente cubierta, escalada para cubrir la div-tag dinámica.

Answer 9

No es una solución perfecta, pero este CSS podría ayudar. El zoom es lo que hace que este código funcione, y el factor debería ser teóricamente infinito para funcionar idealmente para imágenes pequeñas, pero 2, 4 u 8 funcionan bien en la mayoría de los casos.

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

Answer 10

Para hacer que esta imagen se estire al tamaño máximo posible sin desbordarla ni sesgar la imagen.

Aplicar...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

estilos a la imagen.

Answer 11

Puede usar object-fit: cover; en el div principal

https://css-tricks.com/almanac/properties/o/object-fit/

Answer 12

Si puede, use imágenes de fondo y configure background-size: cover . Esto hará que el fondo cubra todo el elemento.

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

Si tiene problemas con el uso de imágenes en línea, hay algunas opciones. Primero, hay

ajuste de objeto

Esta propiedad actúa sobre imágenes, videos y otros objetos similares a background-size: cover .

CSS

img {
  object-fit: cover;
}

Lamentablemente, el soporte del navegador no es tan bueno con IE hasta que la versión 11 no lo soporta en absoluto. La siguiente opción usa jQuery

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

Complemento jQuery personalizado

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          ''background'': ''url('' + src + '') 50% 50%/contain no-repeat''
        });
      } else {
        $wrapper.css({
          ''background'': ''url('' + src + '') 50% 50%/cover no-repeat''
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

Usa el plugin como este

jQuery(''.cover-image'').coverImage();

Tomará una imagen, la establecerá como una imagen de fondo en el elemento contenedor de la imagen y eliminará la etiqueta img del documento. Por último, podrías usar

Pure CSS

Puede usar esto como una alternativa. La imagen se ampliará para cubrir su contenedor, pero no se reducirá.

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Espero que esto pueda ayudar a alguien, ¡feliz codificación!

Answer 13

Usando este método, puedes completar tu div con la proporción variable de divs e imágenes.

jQuery:

$(window).load(function(){
   $(''body'').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children(''img'').width()/$this.children(''img'').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children(''img'').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

Answer 14

si trabajas con la etiqueta IMG, es fácil.

Yo hice esto:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $(''#pic img'').attr({ ''style'':''height:25%; display:none; left:100px; top:100px;'' })
)}

pero no encontré cómo hacerlo funcionar con #pic {background: url (img / menu.png)} Enyone? Gracias