Sin duda CSS3 nos va a permitir hacer cosas que hasta ahora eran bastante complejas de hacer, al menos si se querían hacer bien. Aunque todavía casi ningún navegador le da soporte (yo lo he probado con Opera 12a), me gusta mucho las funciones de object-fit que permiten, de forma sencilla, integrar imágenes o incluso vídeos dentro de un espacio determinado, o adaptarlo a unos tamaños a los que hasta ahora estábamos forzados.
He hecho la prueba en Internet Explorer 9.0, Google Chrome 16.0, Mozilla Firefox 9.0 y Opera 12a y sólo en este último he conseguido que esto funcione…
El objetivo es hacer lo siguiente (imagen basada en Opera 12a):
Object Fit: Contain
Básicamente es meter la imagen dentro de un espacio definido. En mi caso era meter la imagen en un cuadrado de 150px x 150px. Para ello tan sólo hay que ejecutar el siguiente código de CSS.
width: 150px;
height: 150px;
border: 1px solid black;
-ms-object-fit: contain;
-moz-object-fit: contain;
-o-object-fit: contain;
-webkit-object-fit: contain;
object-fit: contain;Con esto conseguimos meter la imagen dentro del recuadro, como se ve en la imagen.
Object Fit: Cover
En este caso tenemos algo similar, pero lo que hace es adaptar la imagen del alto o ancho (la menos de ellas) al ancho o alto propuesto por el código… esto significa que siempre habrá un sitio por el que sea más grande si la imagen no es cuadrada.
width: 150px;
height: 150px;
border: 1px solid black;
-ms-object-fit: cover;
-moz-object-fit: cover;
-o-object-fit: cover;
-webkit-object-fit: cover;
object-fit: cover;Podéis ver un ejemplo en real en la página de ejemplo de CSS3 object-fit que he hecho para probar o visitar la página del W3C donde se explican más detalles sobre object-fit.
Deja una respuesta