Object-fit: dimensionado de imágenes y objetos en Css 17.9.15

Object-fit: dimensionado de imágenes y objetos en Css

Las imágenes utilizadas en CSS pueden provenir de diversas fuentes: de los formatos binarios de imágenes (como GIF, JPEG, etc), formatos de marcado dedicados (como SVG) y formatos específicos de CSS (como los gradientes lineales). Además, un documento puede contener muchos otros tipos de objetos, como vídeo, plugins, o documentos anidados. Estas imágenes y los objetos pueden ofrecer mucha información sobre su tamaño a CSS, o ninguna en absoluto.

Lo que sigue es parte del documento de nivel 3 CSS Image Values and Replaced Content con estatus "Candidate Recommendation" desde Abril de 2012.

Dejo fuera de este artículo todo lo referente a los gradientes Css que también están definidos en él.

Terminología del dimensionado de objetos

El consorcio define una serie de término para ayudar a una mejor comprensión del documento.

Dimensiones intrínsecas (intrinsic dimensions)

El término dimensiones intrínsecas se refiere al trío de la altura intrínseca, el ancho intrínseco, y la relación de aspecto intrínseco (la relación entre la anchura y la altura). Cada uno de los cuales pueden o no existir para un objeto dado. Estas dimensiones intrínsecas representan al tamaño preferido o natural del objeto en sí mismo, es decir, no son función del contexto en el que se utiliza el objeto. Por lo general Css no define cómo se calculan las dimensiones intrínsecas.

Las imágenes de trama son un ejemplo de un objeto con las tres dimensiones intrínsecas. Las imágenes SVG diseñadas a escala pueden tener sólo una relación de aspecto intrínseco o ser creadas con sólo la anchura o la altura intrínseca. Los gradientes CSS son un ejemplo de un objeto sin ninguna dimensiones intrínsecas. Otro ejemplo de objetos sin ninguna dimensión intrínseca son los objetos incrustados en el documentos, como el elemento <iframe> en HTML. Un objeto no puede tener sólo dos dimensiones intrínsecas, porque dos cualesquiera de ellas definen automáticamente la tercera.

Si un objeto (como un icono) tiene múltiples tamaños, el tamaño más grande (por área) es tomado como su tamaño intrínseco.

Tamaño específico

El tamaño específico de un objeto viene dado por CSS, por ejemplo a través de la propiedad 'width', 'height' o 'background-size'. O puede ser definido por la anchura y la altura, o un conjunto de restricciones (como 'max-/min width/height', o una combinación de ellas.

Tamaño concreto

El tamaño del objeto concreto es el resultado de combinar sus dimensiones intrínsecas y el tamaño especificado con el tamaño del objeto por defecto en el contexto donde se utiliza, resultando en un rectángulo con un ancho y alto definidos.

Tamaño predeterminado o por defecto

El tamaño del objeto por defecto es un rectángulo, con una altura y anchura definidas, utilizado para determinar el tamaño del objeto cuando está ausentes sus dimensiones intrínsecas y su tamaño específico.

Negociación CSS⇋Object

Los objetos en Css se calcula su tamaño y se renderizan como sigue:

1. Cuando se especifica una imagen o un objeto en un documento, como por ejemplo a través del valor 'url()' en una propiedad 'background-image' o un atributo src de un elemento <img>, CSS consulta (usa) las dimensiones intrínsecas del objeto.
2. En base a las dimensiones intrínsecas, el tamaño específico y el tamaño del objeto predeterminado por el contexto de la imagen u objeto donde se utiliza, CSS calcula el tamaño concreto. (Consulte el apartado siguiente.) Esto define el tamaño y la posición de la región o parte del objeto que se renderizará.
3. Css le pide al (obtiene del) propio objeto a renderizar su tamaño concreto. Cuando el tamaño concreto del objeto es diferente de sus dimensiones intrínsecas Css no define cómo renderizarlo. El objeto debe ajustarse por sí mismo de alguna manera para coincidir con su tamaño concreto, e incluso hacerse mayor o menor que su tamaño concreto para satisfacer sus propias restricciones.
4. A menos que se especifique lo contrario por el CSS, el objeto es entonces cortado (clipped) al tamaño concreto.

Determinación del tamaño concreto del objeto

Actualmente las reglas para dimensionar los tamaños de los objetos se describen en cada contexto en el que se utilizan cada tipo de objeto. En esta sección se definen algunas limitaciones comunes del tamaño y cómo determinarlos de manera que las futuras especificaciones pueden referirse a ellos en vez de tener que redefinir su resolución en cada caso.

Algoritmo para el dimensionado por defecto

El algoritmo para hallar el tamaño predeterminado o por defecto es un conjunto de reglas de uso común para encontrar el tamaño concreto de un objeto. Resuelve el conjunto de restricciones que pueda haber por estar definidas o no las diferentes medidas del objeto (tamaño intínseco, especificado, anchura y/o altura definidas...).

Algunas reglas para el cómputo del tamaño (como los de 'list-style-image') se corresponden exactamente con el algoritmo de tamaño predeterminado. Otros (como los de 'border-image') invocan el algoritmo de dimensionamiento por defecto, pero también se aplican las normas de tamaño adicionales antes de llegar a un tamaño final de un objeto concreto.

Para conocer a fondo los distintos algoritmos consulta este apartado en la especificación. En él tienes ejemplos de aplicación a distintos objetos incluidos por las propiedades "background-image", 'list-style-image', 'border-image', 'content', 'cursor'.

Dimensionado de objetos: la propiedad Css 'object-fit'

Esta propiedad define en los elementos reemplazados cómo se corresponde el tamaño concreto del objeto con la anchura y la altura usada por el elemento (su cuadro creado), que por defecto coinciden. O dicho de otro modo, cómo el contenido de un elemento reemplazado debe ser insertado en el cuadro creado por él mismo.

Object-fit: sus valores y significado

Fill

El contenido reemplazado se dimensiona para llenar la caja del elemento. Las dimensiones del objeto se ajustan para cubrir toda la caja, incluso perdiendo su relación de aspecto.

contain

El contenido reemplazado se dimensiona manteniendo su relación de aspecto para colocarlo dentro de la caja contenedora.

cover

El contenido reemplazado se dimensiona manteniendo su relación de aspecto para cubrir toda la superficie de la caja contenedora.

none

El contenido reemplazado no se redimensiona. El tamaño con el que se mostrará el objeto dependerá del tipo de objeto del que se trate (y del algoritmo usado por él).

scale-down

Dimensiona el contenido como si se especificaron 'none' o 'contain', lo que se resultará en el tamaño concreto del objeto más.

El significado de los valores anteriores se explican mejor con la siguiente imagen:

Si el contenido no llena completamente la caja generada por el elemento reemplazado, el espacio sin cubrir muestra el fondo del elemento reemplazado. Dado que los elementos reemplazados siempre acotan su contenido a la caja de contención, el contenido nunca se desborda (tal como ocurre con las imágenes usadas en 'background').

La propiedad 'object-position'

La propiedad 'object-position' determina la alineación del elemento reemplazado dentro de su caja. El tipo de valor <position> (que también se utiliza para 'background-position') se define en [CSS3VAL], y se resuelve usando el tamaño concreto del objeto como el área del objeto y la caja de contenido como el área para su posicionamiento.

Su valor inicial es 50% 50%. Los valores porcentuales se refieren a la anchura y altura de su propia caja (la zona verde de la imagen anterior).

La propiedad 'image-orientation'.

Su valor se declara en ángulos.

Si se toma una fotografía con una cámara ladeada, o se escanea un documento que no está colocado correctamente dentro de un escáner, la imagen resultante puede estar descuadrada, o incluso al revés. La propiedad 'image-orientation' proporciona una manera de aplicar una rotación 'out-of-band' a los datos de origen de las imágenes para orientarla correctamente.

Ten en cuenta que algunos de los dispositivos etiquetan las imágenes con algunos metadatos que indican su orientación correcta, por lo que el software de visualización de imágenes puede hacer las transformaciones necesarias ellos mismos. Debido a las restricciones legales de compatibilidad, a los navegadores web se les requiere que ignoren estos datos por defecto.

Esta propiedad no está diseñada para especificar transformaciones de diseño, como la rotación arbitraria o voltear la imagen en dirección horizontal o vertical. Para ello son está la propiedad 'transform'. Tampoco para girar la imagen según la orientación del dispositivo (landscape/portrait), ésto es cometido del software del propio aparato.

La propiedad 'image-resolution'

La resolución de la imagen se define como el número de píxeles por unidad de superficie. Hay formatos de imagen que pueden contener esta información que ser de ayuda.

En Css por defecto se presupone una resolución de 1px de imagen por cada píxel Css.

Los valores posibles para la propiedad image-resolution son:

valores numéricos

Una magnitud con su unidad correspondiente: image-resolution: 300dpi

from-image (palabra clave)

La resolución intrínseca de la imagen que es el valor especificado por el formato de imagen. En caso de que el formato no contenga esa información equivale a 1ddpx.

snap (palabra clave

Deja en manos del agente de usuario elegirla.

Otros post y demos en el blog

Con posterioridad a la publicación de este artículo le he dedicado otros, demos icluídas:

1. Recorte y centrado automático de imagen con object-fit: cover. Incluye demos.

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

2. Flexible cover images; dos formas de lograrlo. Demo.

   See the Pen flexible cover images new school by Kseso (@Kseso) on CodePen.

Amplia información

1. Dev.Opera
2. Su soporte por navegadores

Artículo actualizado el 17 de septiembre de 2015.

Kseso

the obCSServer ᛯ 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 Kseso