En más de una ocasión los diseñadores nos entregan una maqueta con imágenes con alto y ancho fijo. En Photoshop o Sketch se ven muy bonitas pero hay que tener en cuenta que luego en WordPress el usuario tiene la libertad de subir cualquier imagen y si no lo tenemos controlados por CSS podemos acabar con imágenes horrorosas. En esta entrada te mostraré una propiedad que descubrí hace muy poco: object-fit. Técnicamente esta propiedad nos permite especificar cómo se va a distribuir la altura y el ancho de un elemento con respecto a la medida del contenedor.

bruce lee out of aspect ratio
Imagen con aspect-ratio incorrecto.

Sintaxis

/* Posibles valores */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
/* Valores globales */
object-fit: inherit;
object-fit: initial;
object-fit: unset;
  • fill: Valor por defecto. Estira el contenido hasta su contenedor sin tener en cuenta el aspect-ratio.
  • contain: Incrementa o reduce el tamaño del contenido hasta adoptar el tamaño del contenedor respetando el aspect-ratio.
  • cover: El contenido completará el alto y ancho del contenedor pero cortando información si es necesario.
  • none: El contenido se expande a su tamaño original sin respetar los límites del padre.
  • scale-down: Selecciona el menor de la comparación entre none y contain.

Ejemplo

A excepción de la imagen original, todas las copias tienen un alto y ancho fijo de 200px. Observa como se comporta cada copia con los distintos valores de object-fit.

See the Pen ¡Ponte en forma con object-fit! by Mauricio Gelves (@maugelves) on CodePen.

¿Cómo lo utilizo yo?

Suelo utilizar este tipo de imágenes en plantillas controladas, es decir, donde sé de antemano dónde irá ubicada dentro del HTML (no tiene mucho sentido utilizar esta propiedad para imágenes que se carguen en el contenido del post). Para ello genero un campo personalizado con ACF llamado «background_position» para que el usuario me indique dónde está la zona más importante de la imagen y luego complementar la propiedad object-fit con la propiedad object-position. De esta manera siempre tendré la imagen al tamaño deseado y mostrando la parte importante.

selector zona importante de image
Campo ACF del tipo Select con todas las posibilidades de posición.

<img src="<?php the_post_thumbnail_url(); ?>" style="object-position: <?php the_field('background_position'); ?>">

Pueden ver un ejemplo en vivo de este código en la web de Seiyu que acabo de relanzar. Ahí verán que las imágenes de cada post se ubican a la derecha y la izquierda (según par o impar) y con un alto y ancho fijo, aunque la imagen original tenga otro tamaño.

Navegadores

La propiedad object-fit está muy difundida entre los navegadores a excepción de nuestros viejos y casposos amigos de Microsoft. Por suerte hay gente muy maja que se curra Polyfills (pequeños javascripts que recrean el funcionamiento de las etiquetas en navegadores que no lo soportan) para subsanar estos dolores de cabeza.

Update: Me comunican por Twitter que Microsoft ha incluido el atributo CSS en su próximo build. Habrá que esperar a ver si es cierto o no, de momento Can I Use lo sigue marcando en rojo 😑

Conclusión

Defiendo a muerte que el escritor de entradas no tiene que tener limitaciones técnicas a la hora de escribir su post y el uso de esta propiedad en las plantillas HTML le permite subir cualquier imagen sin preocuparse sin romperá o no el aspect-ratio de la misma.
También más de uno habrá encontrado similitud con la propiedad background-size, y está en lo cierto. Solo que esta propiedad podemos utilizar con etiquetas <img> o <video> mejorando así la semántica de nuestra web.