css - tamaño - hacer que una imagen se adapte a un div

¿Cómo puedo llenar un div con una imagen mientras lo mantengo proporcional?

Question

Encontré este hilo: ¿cómo se estira una imagen para llenar un <div> mientras se mantiene la relación de aspecto de la imagen? - Eso no es completamente lo que quiero.

Tengo un div con un cierto tamaño y una imagen dentro de él. Quiero siempre completar el div con la imagen independientemente de si la imagen es horizontal o vertical. Y no importa si la imagen está cortada (el div mismo tiene un desbordamiento escondido).

Entonces, si la imagen es vertical, quiero que el width sea ​​del 100% y la height:auto para que se mantenga en proporción. Si la imagen es horizontal, quiero que la height sea ​​del 100% y que el width to be automático. Suena complicado, ¿verdad?

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

Como no sé cómo hacerlo, simplemente creé una imagen rápida de lo que quiero decir. Ni siquiera puedo describirlo correctamente.

Entonces, supongo que no soy el primero en preguntar esto. Sin embargo, no pude encontrar una solución a esto. Tal vez haya alguna forma nueva de CSS3 de hacer esto, estoy pensando en flex-box. ¿Alguna idea? Tal vez es incluso más fácil de lo que espero que sea?

Answer 1

Aquí tienes mi ejemplo de trabajo. He utilizado un truco que es establecer la imagen como fondo del contenedor div con fondo de tamaño: portada y posición de fondo: centro central

He colocado la imagen con ancho: 100% y opacidad: 0 por lo que es invisible. Tenga en cuenta que solo estoy mostrando mi imagen porque tengo un interés especial en llamar al evento de clic secundario.

Tenga en cuenta que aunque estoy usando angular, es completamente irrelevante.

<div class="foto-item" ng-style="{''background-image'':''url(''+foto.path+'')''}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$(''.materialboxed'')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

El resultado es el que define como óptimo en todos los casos

Answer 2

Considere usar background-size: cover (IE9 +) junto con background-image . Para IE8-, hay un polyfill .

Answer 3

El object-fit: cover CSS object-fit: cover y object-position: left center los valores de la propiedad object-position: left center ahora abordan este problema.

Answer 4

Es un poco tarde, pero tuve el mismo problema y finalmente lo resolví con la ayuda de otra publicación ( https://.com/a/29103071 ).

.img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

Espero que esto todavía ayude a alguien.

Ps: También funciona junto con las propiedades de max-height , max-width , min-width y min-height css. Es especialmente práctico con el uso de unidades de longitud como 100% o 100vh / 100vw para llenar el contenedor o toda la ventana del navegador.

Answer 5

Esto debería hacerlo:

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

Answer 6

No, no hay una solución exclusiva de CSS3 para esto. Sin embargo, la mejor respuesta a la pregunta que vinculó es la segunda mejor opción.

Answer 7

Prueba esto:

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

Espero que esto ayude

Answer 8

Puedes usar div para lograr esto. sin etiqueta img :) Espero que esto ayude.

.img{
 width:100px;
 height:100px;
 background-image:url(''http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg'');
 background-repeat:no-repeat;
 background-position:center center;
 border:1px solid red;
 background-size:cover;
}
.img1{
 width:100px;
 height:100px;
 background-image:url(''https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg'');
 background-repeat:no-repeat;
 background-position:center center;
 border:1px solid red;
 background-size:cover;
}

<div class="img"> 
</div>
<div class="img1"> 
</div>

Answer 9

Si entiendo correctamente lo que desea, puede dejar los atributos de ancho y alto fuera de la imagen para mantener la relación de aspecto y usar flexbox para hacer el centrado por usted.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle aquí

Probé esto con éxito en IE9, Chrome 31 y Opera 18. Pero no se probaron otros navegadores. Como siempre, debe considerar sus requisitos particulares de soporte.

Answer 10

Una vieja pregunta, pero merece una actualización ya que ahora hay una manera.

La respuesta correcta basada en CSS es usar object-fit: cover , que funciona como background-size: cover . El posicionamiento sería atendido por el atributo de object-position , que por defecto se centra.

Pero no hay soporte para esto en ningún navegador IE / Edge, o Android <4.4.4. Además, object-position no es compatible con Safari, iOS o OSX. Los polifills existen, object-fit-images parecen dar el mejor soporte.

Para obtener más detalles sobre cómo funciona la propiedad, consulte css-tricks.com/almanac/properties/o/object-fit para obtener una explicación y una demostración.