soy Kseso y esto EsCSS

Recorte y centrado automático de imagen con object-fit: cover

Recorte y centrado automático de imagen con object-fit: cover

·Por Kseso ✎ 9
Recorte y centrado automático de imagen con 1 declaración Css

En Diciembre de 2013 publicaba el artículo Dimensionado de imágenes y objetos en CSS. Básicamente la traslación al español del documento del W3c CSS Image Values and Replaced Content.

Este documento proporciona herramientas (propiedades) Css para un mejor control de los elementos reemplazados, tales como las imágenes, los vídeos, iframes... étc.

Una aplicación práctica y muy visual de las posibilidades de estas "novedades" es que una imagen al declararle tamaños sin tener en cuenta su relación de aspecto en vez de deformarse se escala y recorta respecto a su centro manteniendo su aspect ratio.

La propiedad que lo hace posible es object-fit y el valor cover

Antes de seguir, mira el pen siguiente y cómo la misma imagen se presenta en distintos tamaños, recortada y sin deformarse. Si usas Firefox deberás esperar a la versión 36.

See the Pen object-fit: cover; by Kseso (@Kseso) on CodePen.

Ver Demo

Todo lo que se necesita es declarar la propiedad object-fit y al menos una propiedad de tamaño (ya sea su anchura o altura).

img { object-fit: cover; width: 35vw; height: 100px; }

Verás que el valor cover actúa igual que al usarse en la propiedad background-size: reescala la imagen según el tamaño indicado por su anchura y/o altura realizando un recorte del sobrante desde el centro. Todo ello sin que haya deformaciones de la imagen.

La propiedad Css object-fit

Pese al tiempo transcurrido el documento CSS Image Values and Replaced Content sigue con el status de W3C Candidate Recommendation. En esto no se ha avanzado.

Lo que sí ha mejorado es el soporte por los navegadores. Todos en verde excepto los IE/Edge.

Para conocer a fondo te recomiendo la lectura en este blog del artículo Dimensionado de imágenes y objetos en CSS.

Si deseas usarlo tienes este polyfill en github.com

Y para terminar, la diferencia de la demo anterior con esta otra declarando object-fit: scale-down.

See the Pen object-fit: scale-down; by Kseso (@Kseso) on CodePen.

Como puedes ver en esta última demo, con los valores scale-down y contain si defines ambos tamaños para la imagen esta se ajusta a ella pero también dibuja una caja del elemento que no tiene por qué coincidir en sus medidas con la imagen. Por lo tanto desplazará a otros elementos adyacentes o si aplicas fondos, sombras, bordes... a la imagen se dibujaran en la caja del elemento, no a la porción de imagen mostrada.

Para hacer que coincidan la parte de la imagen mostrada y la caja del elemento dibujada usa max-width/-height en vez de width y height (como en la tercera imagen del pen anterior).

Propuesta de juego

Recuerda qué ocurre con los iframes, por ejemplo al insertar un vídeo de youtube, y los tamaños declarados.

Prueba a declarar en la hoja de estilos medidas arbitrarias al iframe junto a object-fit: scale-down o algún otro valor de los posibles. Como en este pen

See the Pen video & object-fit: scale-down; by Kseso (@Kseso) on CodePen.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso