Compatibilidad con object-fit

Debido a la gran demanda, hemos añadido la propiedad object-fit a Webflow (abreviada como “fit” en el panel de estilos). Esto te permite controlar cómo se redimensionan las imágenes dentro de sus elementos padres, ofreciéndote una alternativa más accesible y rápida que las imágenes de fondo (mira por qué al final de esta actualización).

Object-fit en acción

Como se muestra en el primer GIF de esta actualización, puedes usar la propiedad fit para controlar cómo se visualiza una cuadrícula de fotos de perfil de autores dentro de su contenedor padre.

En el ejemplo de abajo, los elementos de imagen de las fotos de perfil están configurados al 100% del ancho y alto de sus padres, pero sin la propiedad fit, se ven deformadas al intentar ajustarse a esas dimensiones.

Para que todas las fotos de perfil ocupen el espacio de sus elementos padres sin distorsionarse, aplicaremos el atributo “cover”, que asegura que la imagen, como habrás adivinado, cubra el espacio disponible sin alterar sus proporciones.

Ventajas de usar la propiedad fit frente a las imágenes de fondo

Como muchos señalaron en la lista de deseos para esta función, la propiedad fit ofrece una forma distinta de lograr muchos diseños que actualmente solo son posibles con imágenes de fondo.

Aquí tienes un par de ventajas clave de usar la propiedad fit:

• Mejor accesibilidad. Si usas elementos de imagen en lugar de imágenes de fondo, puedes añadir texto alternativo para que las personas que usan lectores de pantalla entiendan mejor lo que muestra tu página; una opción que simplemente no existe al usar una imagen de fondo.
• Soporte para imágenes adaptables. Webflow escala, comprime y optimiza automáticamente las imágenes en línea para cada dispositivo, pero no las imágenes de fondo. Con la propiedad fit, puedes usar imágenes en línea, por lo que se escalarán adecuadamente para el dispositivo del usuario y, por tanto, cargarán más rápido.

Para ver todas las opciones que permite object-fit, consulta la documentación de Mozilla.