Los secretos de object-fit en CSS y sus valores
En este post, veremos cómo funciona object-fit, cuándo podemos usarlo y por qué, junto con algunos casos de uso práctico y recomendaciones.
Valores Posibles Para object-fit
El valor predeterminado para object-fites fill, lo que puede provocar que una imagen se comprima o estire. Es por eso que debemos conocer el resto de los valores posibles para utilizarlo a nuestro favor.
1 — object-fit: contain
En este caso, la imagen cambiará de tamaño para ajustarse a la relación de aspecto de su contenedor. Si la relación de aspecto de la imagen no coincide con la del contenedor, aparecerá en formato de pantalla ancha.
2 — object-fit: cover
Acá la imagen también se redimensionará para ajustarse a la relación de aspecto de su contenedor, y si la relación de aspecto de la imagen no coincide con la del contenedor, se recortará para que encaje.
3 — object-fit: fill
Con esto, la imagen cambiará de tamaño para ajustarse a la relación de aspecto de su contenedor, y si la relación de aspecto de la imagen no coincide con la del contenedor, se comprimirá o estirará. No queremos eso.
4 — object-fit: none
En este caso, la imagen no se redimensionará en absoluto, ni se estirará ni se apretará. Funciona como el covervalor, pero no respeta la relación de aspecto de su contenedor.
Aparte de object-fit, también tenemos la propiedad object-position, que se encarga de posicionar una imagen dentro de su contenedor.
La propiedad object-position funciona de manera similar a background-positionde CSS:
Las palabras clave topy bottomtambién funcionan cuando la relación de aspecto del cuadro contenedor es verticalmente más grande:
¡Opinen y valoren!
