Responsive Images

La propiedad CSS de ajuste de objeto resuelve una serie de problemas que alguna vez estuvieron presentes con los elementos de imagen estándar. Esencialmente, proporciona la flexibilidad de la imagen de fondo con la facilidad de actualización y los beneficios de SEO de un elemento de imagen al llenar el parent container.

Con el ajuste de objetos, no tiene que preocuparse de que un cliente cargue una imagen con la relación de aspecto incorrecta. Tiene la flexibilidad de optimizar la relación de aspecto de la imagen en diferentes viewports. Y las imágenes se pueden actualizar fácilmente en Webflow sin tener que crear o editar una clase, como lo haría con una imagen de fondo. También puede proporcionar etiquetas alternativas para fines de SEO y accesibilidad.

El Parent Div

El parent div actúa como un lienzo para la imagen, describiendo el bounding box y la relación de ratio deseada. El Image establece el overflow hidden y la position relative, ya que la imagen se colocará absolutamente dentro del div. Y una subclass define la relación del ratio de la imagen utilizando el relleno superior en unidades porcentuales.

La fórmula para este cálculo es la altura dividida por el ancho por 100. Entonces, para lograr una relación de aspecto de 21x9, es 9/21*100, lo que equivale a un relleno superior de 42,857 %. En otras palabras, la altura es el 42,857% del ancho de la imagen.

Knockout admite las siguientes aspect ratios: 16x5, 21x9, 2x1, 16x9, 4x3 y & 1x1.

La imagen

La imagen dentro del div simplemente necesita Object Fit Cover class para llenar el parent div como lo haría un background.

Responsiveness

Una característica útil delobject fit es que podemos ajustar las relaciones de aspecto en diferentes viewports. Por ejemplo, es posible que queramos una imagen muy ancha de 21x9 en desktop. Pero eso podría parecer pequeño en una tableta y demasiado pequeño en un dispositivo móvil. Entonces podemos cambiar la relación de aspecto a 16x9 en tabletas y 4x3 en dispositivos móviles usando la siguiente cadena de clases: Image 21x9 Tab 16x9 4x3 Mob .

A continuación:

Modular Animation