guia - Tamaño de la imagen CSS, ¿cómo rellenar, no estirar?

qgis manual

Question

Tengo una imagen, y quiero establecer un ancho y una altura específicos (en píxeles)

Pero si configuro el ancho y alto usando css ( width:150px; height:100px ), la imagen se estirará, y puede ser fea.

¿Cómo llenar imágenes a un tamaño específico usando CSS, y no estirarlo ?

Ejemplo de relleno y estiramiento de imagen:

Imagen original:

Imagen estirada:

Imagen rellena:

Tenga en cuenta que en el ejemplo de imagen rellena anterior: primero, la imagen se redimensiona a 150x255 (relación de aspecto mantenida), y luego, se recorta a 150x100.

Answer 1

A partir de la respuesta de @Dominic Green usando jQuery, aquí hay una solución que debería funcionar para imágenes que son más anchas que altas o más altas que anchas.

http://jsfiddle.net/grZLR/4/

Probablemente hay una forma más elegante de hacer el JavaScript, pero esto funciona.

function myTest() {
var imgH = $("#my-img").height();
var imgW = $("#my-img").width();
if(imgW > imgH) {
$(".container img").css("height", "100%");
var conWidth = $(".container").width();
var imgWidth = $(".container img").width();
var gap = (imgWidth - conWidth)/2;
$(".container img").css("margin-left", -gap);
} else {
$(".container img").css("width", "100%");
var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight)/2;
$(".container img").css("margin-top", -gap);
}
}
myTest();

Answer 2

Ayudé a construir un plugin de jQuery llamado Fillmore , que controla el background-size: cover del background-size: cover en los navegadores que lo admiten y tiene un margen para aquellos que no lo hacen. ¡Dale un vistazo!

Answer 3

Creo que es bastante tarde para esta respuesta. De todos modos espero que esto ayude a alguien en el futuro. Me enfrenté al problema posicionando las cartas en angular. Hay tarjetas que se muestran para una variedad de eventos. Si el ancho de la imagen del evento es grande para la tarjeta, la imagen debe mostrarse recortando desde dos lados y una altura del 100%. Si la altura de la imagen es larga, la parte inferior de la imagen se recorta y el ancho es del 100%. Aquí está mi solución css pura para esto:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{''background-image'' : ''url(''+event.image+'')''}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

Answer 4

En realidad, esto es solo una derivación de la respuesta más votada de esta pregunta (no la aceptada).

Hay dos diferencias:

1. NO es necesario proporcionar los atributos de height y width en el elemento de image porque el estilo los anulará.
   Así que basta con escribir algo como esto.

   <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" />

2. Proporcionando width:100% en el estilo.
   Esto es útil si está utilizando bootstrap y desea que la imagen se extienda todo el ancho disponible.
   Especificar la propiedad de height es opcional, pero en mi caso, fue algo bueno.

   .cover {
   object-fit: cover;
   width: 100%;
   height: 300px; /* optional, but in my case it was good */
   }

Answer 5

Esto llenará las imágenes a un tamaño específico, sin estirarlo ni recortarlo

img{
width:150px; //your requirement size
height:100px; //your requirement size
/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
object-fit:scale-down;
}

Answer 6

Intente algo como esto: http://jsfiddle.net/D7E3E/4/

Usando un contenedor con rebosadero: oculto

EDITAR: @Dominic Green me ganó.

Answer 7

La única forma real es tener un contenedor alrededor de su imagen y usar el overflow:hidden :

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

Es un dolor en CSS hacer lo que quieres y centrar la imagen, hay una solución rápida en jQuery como:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

Answer 8

Otra solución es colocar la imagen en un contenedor con el ancho y la altura deseados. Con este método, no tendría que configurar la imagen como imagen de fondo de un elemento.

Luego, puede hacer esto con una etiqueta img y simplemente establecer un ancho máximo y una altura máxima en el elemento.

CSS:

.imgContainer {
display: block;
width: 150px;
height: 100px;
}
.imgContainer img {
max-width: 100%;
max-height: 100%;
}

HTML:

<div class=''imgContainer''>
<img src=''imagesrc.jpg'' />
</div>

Ahora, cuando cambia el tamaño del contenedor, la imagen crecerá automáticamente tan grande como sea posible sin salirse de los límites o distorsionarse.

Si desea centrar la imagen vertical y horizontalmente, puede cambiar el contenedor css a:

.imgContainer {
display: table-cell;
width: 150px;
height: 100px;
text-align: center;
vertical-align: middle;
}

Aquí hay un JS Fiddle http://jsfiddle.net/9kUYC/2/

Answer 9

Puede utilizar la propiedad css object-fit .

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
.cover {
object-fit: cover;
width: 50px;
height: 100px;
}

Ver ejemplo aquí

Hay un polyfill para IE: https://github.com/anselmh/object-fit

Answer 10

Si desea utilizar la imagen como fondo CSS, existe una solución elegante. Simplemente use cover o contain en la propiedad CSS3 de background-size .

<div class="container"></div>​
.container {
width: 150px;
height: 100px;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}​

Mientras que la cover te dará una imagen ampliada, el contain te dará una imagen reducida. Ambos mantendrán la relación de aspecto de píxeles.

http://jsfiddle.net/uTHqs/ (usando la cubierta)

http://jsfiddle.net/HZ2FT/ (usando contener)

Este enfoque tiene la ventaja de ser amigable con las pantallas Retina según la guía rápida de Thomas Fuchs. http://cl.ly/0v2u190o110R

Vale la pena mencionar que el soporte del navegador para ambos atributos excluye IE6-8. http://www.quirksmode.org/css/background.html

Answer 11

Solución CSS sin JS y sin imagen de fondo:

Método 1 "margen automático" (IE8 + - ¡NO FF!):

div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
top:0;
bottom:0;
margin: auto;
width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

Método 2 "transformar" (IE9 +):

div{
width:150px;
height:100px;
position:relative;
overflow:hidden;
}
div img{
position:absolute;
width:100%;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<p>Wrapped:</p>
<div>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/

El método 2 se puede usar para centrar una imagen en un contenedor de ancho / altura fijo. Ambos pueden desbordarse, y si la imagen es más pequeña que el contenedor, aún estará centrada.

http://jsfiddle.net/5xjr05dt/3/

Método 3 "doble envoltura" (IE8 + - ¡NO FF!):

.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
display: table;
left: 50%;
}
.inner img {
display: block;
border: 1px solid blue; /* just for example */
position: relative;
right: 50%;
opacity: .5; /* just for example */
}

<div class="outer">
<div class="inner">
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>

http://jsfiddle.net/5xjr05dt/5/

Método 4 "doble envoltorio Y doble imagen" (IE8 +):

.outer{
width:150px;
height:100px;
margin: 200px auto; /* just for example */
border: 1px solid red; /* just for example */
/* overflow: hidden; */ /* TURN THIS ON */
position: relative;
}
.inner {
border: 1px solid green; /* just for example */
position: absolute;
top: 50%;
bottom: 0;
display: table;
left: 50%;
}
.inner .real_image {
display: block;
border: 1px solid blue; /* just for example */
position: absolute;
bottom: 50%;
right: 50%;
opacity: .5; /* just for example */
}
.inner .placeholder_image{
opacity: 0.1; /* should be 0 */
}

<div class="outer">
<div class="inner">
<img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
<img class="placeholder_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>
</div>

http://jsfiddle.net/5xjr05dt/26/

• El método 1 tiene un soporte ligeramente mejor: ¡tienes que establecer el ancho O la altura de la imagen!
• Con los prefijos, el método 2 también tiene un soporte decente (de ie9 en adelante). ¡El método 2 no tiene soporte en Opera mini!
• El método 3 usa dos envoltorios: puede desbordar el ancho y la altura.
• El método 4 utiliza una imagen doble (una como marcador de posición), lo que le da una sobrecarga adicional de ancho de banda, pero es incluso mejor para el navegador cruzado.

Los métodos 1 y 3 no parecen funcionar con Firefox