Ajuste de objeto - Trucos CSS | Almanaque CSS 2024

La object-fitpropiedad define cómo responde un elemento a la altura y el ancho de su cuadro de contenido. Está diseñado para imágenes, videos y otros formatos multimedia integrables junto con la object-positionpropiedad. Usado por sí solo, object-fitnos permite recortar una imagen en línea al brindarnos un control detallado sobre cómo se aplasta y se estira dentro de su caja.

object-fit se puede configurar con uno de estos cinco valores:

fill: este es el valor predeterminado que estira la imagen para ajustarse al cuadro de contenido, independientemente de su relación de aspecto.
contain: aumenta o disminuye el tamaño de la imagen para llenar el cuadro conservando su relación de aspecto.
cover: la imagen llenará la altura y el ancho de su cuadro, una vez más manteniendo su relación de aspecto pero a menudo recortando la imagen en el proceso.
none: la imagen ignorará la altura y el ancho del padre y conservará su tamaño original.
scale-down: la imagen comparará la diferencia entre noney containpara encontrar el tamaño de objeto concreto más pequeño.

Así es como podemos establecer esa propiedad:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Debido a que la segunda imagen tiene una relación de aspecto diferente a la imagen original de la izquierda, se estirará fuera del ámbito de su cuadro de contenido, recortando las partes superior e inferior de la imagen.

Vale la pena señalar que, de forma predeterminada, la imagen está centrada dentro de su cuadro de contenido, pero esto se puede modificar con la object-positionpropiedad.

Manifestación

La siguiente demostración muestra cinco ejemplos que detallan cómo podríamos querer que una imagen se aplaste en un cuadro de contenido que a veces es más pequeño o más grande que su ancho original (cambie el tamaño del navegador para tener una mejor idea de cómo podría funcionar):

Vea el ajuste de objetos Pen de Robin Rendle (@robinrendle) en CodePen.

Si el contenido de la imagen no llena el cuadro de contenido por cualquier motivo, el espacio vacío mostrará el fondo del elemento, en este caso un fondo gris claro.

Soporte de navegador

Vale la pena señalar que iOS 8-9.3 y Safari 7-9.1 son object-fitpropiedad, pero no object-position.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.