Recorte y centrado automático de imagen con object-fit: cover 8.9.16
Cómo redimensionar imágenes a la anchura y altura deseadas alterando su relación de aspecto sin que se deformen con la propiedad Css object-fit
Recorte y centrado automático de imagen con object-fit: cover
En Diciembre de 2013 publicaba el artículo Dimensionado de imágenes y objetos en CSS
. Básicamente la traslación al español del documento del W3c CSS Image Values and Replaced Content
.
Este documento proporciona herramientas (propiedades) Css para un mejor control de los elementos reemplazados, tales como las imágenes, los vídeos, iframes... étc.
Una aplicación práctica y muy visual de las posibilidades de estas "novedades" es que una imagen al declararle tamaños sin tener en cuenta su relación de aspecto en vez de deformarse se escala y recorta respecto a su centro manteniendo su aspect ratio
.
La propiedad que lo hace posible es object-fit y el valor cover
Antes de seguir, mira el pen siguiente y cómo la misma imagen se presenta en distintos tamaños, recortada y sin deformarse. Si usas Firefox deberás esperar a la versión 36.
See the Pen object-fit: cover; by Kseso (@Kseso) on CodePen.
Todo lo que se necesita es declarar la propiedad object-fit y al menos una propiedad de tamaño (ya sea su anchura o altura).
img { object-fit: cover; width: 35vw; height: 100px; }
Verás que el valor cover actúa igual que al usarse en la propiedad background-size: reescala la imagen según el tamaño indicado por su anchura y/o altura realizando un recorte del sobrante desde el centro. Todo ello sin que haya deformaciones de la imagen.
La propiedad Css object-fit
Pese al tiempo transcurrido el documento CSS Image Values and Replaced Content
sigue con el status de W3C Candidate Recommendation
. En esto no se ha avanzado.
Lo que sí ha mejorado es el soporte por los navegadores. Todos en verde excepto los IE/Edge.
Para conocer a fondo te recomiendo la lectura en este blog del artículo Dimensionado de imágenes y objetos en CSS
.
Si deseas usarlo tienes este polyfill en github.com
Y para terminar, la diferencia de la demo anterior con esta otra declarando object-fit: scale-down.
See the Pen object-fit: scale-down; by Kseso (@Kseso) on CodePen.
Como puedes ver en esta última demo, con los valores scale-down y contain si defines ambos tamaños para la imagen esta se ajusta a ella pero también dibuja una caja del elemento que no tiene por qué coincidir en sus medidas con la imagen. Por lo tanto desplazará a otros elementos adyacentes o si aplicas fondos, sombras, bordes... a la imagen se dibujaran en la caja del elemento, no a la porción de imagen mostrada.
Para hacer que coincidan la parte de la imagen mostrada y la caja del elemento dibujada usa max-width/-height en vez de width y height (como en la tercera imagen del pen anterior).
Propuesta de juego
Recuerda qué ocurre con los iframes, por ejemplo al insertar un vídeo de youtube, y los tamaños declarados.
Prueba a declarar en la hoja de estilos medidas arbitrarias al iframe junto a object-fit: scale-down o algún otro valor de los posibles. Como en este pen
See the Pen video & object-fit: scale-down; by Kseso (@Kseso) on CodePen.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Cuando se te ocurra algo con esto que haga que los vídeos se "encajen" en su marco... avisa ;)
ResponderEliminar¿A qué te refieres exáctamente con "encajar", Oloman?
EliminarSi te explayas algo más sobre qué querrías lograr y cuál debería ser el comportamiento del vídeo en las distintas situaciones vemos qué se podría hacer.
Un saludo
No he dicho na... Era esto http://codepen.io/oloman/pen/RNVvWO
EliminarAh! Vale. Era esto:
Eliminar[pen]data-height="300" data-theme-id="299" data-slug-hash="RNVvWO" data-default-tab="result" data-user="oloman" class='codepen'[/pen]
(ya que es posible lo uso :-)
Pero ahí no es necesario el object-fit ya que estás mantenido la relación de aspecto del vídeo al declarar valores explícitos para la altura y anchura del iframe en base a esa relación.
Inicialmente pensé que estabas jugando con object-fit y tamaños condicionados por el contenido (fit-content y compañía).
Ya, pero yo me refería a si con esa propiedad (no la conozco) se podría hacer algo así sin declarar la altura. Supongo que viste que el vídeo de tu ejemplo se recortaba según cambias la ventana por lo que pretendía usar el object-fit para ver si de alguna manera se redimensionaba todo. Ya vi que tuve que usar la altura en proporción
EliminarEl iframe es un objeto reemplazado, como las imágenes. Pero a diferencia de éstas no tiene unas medidas intrínsecas, así que hay que dárselas de alguna manera. A ello suma que hay que tener en cuenta la relación de aspecto de cada vídeo.
EliminarQuizás todo sea más fácil cuando sea posible usar el CSS Scoping Module Level 1 en conjunto con los tamaños condicionados por el contenido.
Recuerda que la característica de object-fit es ese escalado a la anchura y altura y el "recorte" del sobrante en caso de sobresalir para no deformar al objeto.
Pero todo es cuestión de que las musas quieran y nos regalen un momento de inspiración ;-)
Un saludo, Manolo.
¿"reemplazado"? ¿"recuerda"? Tío, tú sabes mucho de esto, no como otros :)
EliminarBesitos
"Remplazado" hace referencia a que no es texto y que el objeto completo(etiqueta html) sera sustituida al dibujar la pagina. Cambien es la primera vez que escucho esa designación, sin embargo, creo que es bastante intuitiva su interpretación.
EliminarHola Ecco. Lo que voy a agregar es un absoluto offtopic, pero el artículo está bien resuelto y no sé si se pueda agregar algo más que no se haya dicho, así que aprovecho a hacer mis comentarios al margen.
EliminarTengo la impresión de que Oloman Oloman le estaba haciendo una broma a Kseso, y que en verdad sabía lo de los "elementos de reemplazo"; pero se porta humilde y se hace el que no, aunque viendo su blog nos damos cuenta de que sí sabe y nos está mintiendo. ;-)
Igual que a Kseso le salen mucho estas definiciones, porque éste es un blog muy especializado y su comunidad tiene conocimientos suficientes del tema como para entender o al menos intuir (lo dijiste muy bien) de qué se está hablando.
Y hablando de "qué se está hablando", no me quedó claro tu
«Cambien es la primera vez que escucho esa designación ...»
Puede que en realidad sea un "Cambien, es la primera vez que escucho esa designación" pidiendo que usen otra forma de llamarlos; o quizá un "También es la primera vez que escucho esa designación" solidarizándote con el supuesto desconocimiento de Oloman.
En cualquier caso, me quedé pensando que ambos dialogantes son de España, y allí está muy arraigada la costumbre de traducir literalmente. La voz original es replaced elements, y justamente no tiene una versión mejor en castellano que "elementos reemplazados". En nuestros países es más común usar la definición en inglés o algún barbarismo tan propio de las américas, pero allá por las iberias, no. (Hace unas semanas, casualmente, comentaba sobre esto en otra comunidad.)
Lo que sí puedo agregar al tema es la inquietud sobre el alcance de CSS en elementos (diría que el único elemento) como 'iframe', que puede contener etiquetas formateables y por alguna razón nadie pide que sean accesibles desde los estilos de la ventana madre.