CSS 3 object-fit: cover y contain

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.

Categorías CSS, Javier

2 comentarios en “CSS 3 object-fit: cover y contain”

  1. CSS3 ese gran incomprendido de los navegadores… hay tantas cosas que se pueden hacer y lo que no hago, solo por que el 50% de gente que usa Explorer pueda ver mi pagina correctamente… sinceramente es la risa lo de:

    {
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }

    Después de 5 años, cuando lo utilice por primera vez, tengo que seguir poniéndolo… pero cuando acabara esta payasada de repetir la misma linea 3 veces…

    Lo mismo puede decir de HTML5…

    Lo siento, como desarrollador gueb, a veces me indigno… tenemos que saber muchísimo CSS (CSS 2.0, CSS 3.0), HTML (4.0 para legacy, xhtml para presente y 5 para el futuro), PHP (4.0 para las chapuzas y 5.0 para OO), Framewoks (Symfony, Codeigniter, Zend), CMS (Wodpress, Drupal) edición de fotos, administración de servidores (Apache, Node JS)… por lo cual nos pagan 3 duros y encima tenemos que soportar a los putos navegadores que no se ponen de acuerdo en algo que debería de ser jodidamente SIMPLE.

    Un saludo!

    P.D: se me olvidaba el JavaScript (lo que incluye conocimiento de jQuery, MooTools)… sin olvidar el AJAX claro.

    P.D 2: Y todo ello orientado a SEO lo que implica el uso correcto de .htaccess con sus expresiones regulares y los redirect bien hechos, para no perder nada de contenido, las urls bonicas con palabras clave y otras choradas

Deja un comentario