Flexible cover images y videos. Dos formas de lograrlo 7.10.15
Dos formas para lograr imágenes o vídeos que cubran toda una superficie sin distorsionarse. Imagen y superficie de tamaños y relación de aspecto desconocidos a priori. Efecto conocido como "Flexible cover images/vídeo".
Flexible cover images y videos. Dos formas de lograrlo
La imágenes tienen una relación de aspecto (anchura y altura) que si se modifican sin respetarla da como resultado la distorsión de la escena.
En ocasiones se necesita que la imagen a ser mostrada ocupe toda una superficie variable sin sobresalir de ella y sin que haya tales distorsiones.
Si la imagen es introducida vía Css y como fondo del elemento no hay problema. Hace tiempo que background-size: cover; se puede utilizar sin mayores problemas.
La dificultad estriba cuando la imagen es contenido, no es ornamental, y por lo tanto forma parte del Html introducida con el elemento <img src='.../>
Flexible cover images: definiendo los detalles
¿Qué se entiende por Flexible cover images
?
Tengamos un elemento que al menos una de sus dimensiones (ancho o alto) sea variable. A priori no existe forma de saber su longitud. Tengamos un elemento de tipo imagen en el Html que de un caso a otro su tamaño y relación de aspecto variará.
Deseamos que esta imagen cubra toda la superficie del elemento sin sufrir distorsiones. Esto lleva implícito que ha de ser recortado el sobrante de la imagen.
Es un caso muy típico en blogs. Últimamente se ve a menudo: bajo cada título de cada entrada se coloca una imagen, cada vez la suya. Título e imagen han de ocupar el 100% de la anchura (el total del viewport donde se muestra) y la altura es función de la longitud del título.
Flexible cover images y vídeo: nueva escuela
La forma más sencilla es recurrir a "lo último" en el manejo de objetos por Css: la propiedad object-fit asignándole el valor cover
See the Pen flexible cover images new scholl by Kseso (@Kseso) on CodePen.
Pros de object-fit
Sencillez de marcado Html:
<header>
<img class='flexible' src="ruta.ext" alt />
<h1>flexible cover images <span>new school</span></h1>
</header>
Sencillez del Css necesario:
.flexible {
position:absolute;
object-fit: cover;
width: 100%;
height: 100%;
}
Contras de object-fit
Posíblemente el mayor y único hándicap que tenga esta propiedad sea su soporte por los distintos navegadores y sus versiones.
Flexible cover video 100%
Esta propiedad también puede ser declarada a cualquier otro objeto, como un vídeo, y en base a ella tener un vídeo cubriendo toda la ventana del navegador: vídeo al 100%:
See the Pen FLEXIBLE COVER VIDEO by Kseso (@Kseso) on CodePen.
Flexible cover images y vídeo: vieja escuela
Si buscamos algo más de compatibilidad necesitamos añadir un poco más de marcado a nuestro Html para obtener el mismo fin:
<header>
<div class="fondo-imag">
<img src="ruta.ext" alt />
</div>
<h1>flexible cover images <span>old school</span></h1>
</header>
La razón de este elemento extra (code>div) es preparar el terreno para lograr el comportamiento deseado de la imagen:
.fondo-imag {
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
.fondo-imag img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
El resultado de todo junto es el que puedes ver en en siguiente pen:
See the Pen flexible cover images old school by Kseso (@Kseso) on CodePen.
Flexible cover video 100%
La misma técnica usada para mostrar el vídeo al 100%:
See the Pen flexible cover video II by Kseso (@Kseso) on CodePen.
Hay pequeñas diferencias en el resultado final entre un método en cuanto al resultado final, pero tampoco son tan llamativas.
Un apunte final: si usas estas técnicas para colocar un texto sobre una imagen has de tener presente la legibilidad. Así que habrás de implementar algún efecto que te asegure que el texto se podrá leer correctamente. Algunas las mencionaba en el artículo Texto sobre imágenes: hazlo legible
![](https://www.pinterest.com/pin/create/button/?url=https://escss.blogspot.com/2015/01/flexible-cover-images-2-formas.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJxjicBUj2OHfPs3S-hteRMDWaj3rIDIUB_tCsqn5asYFXV8s5c6Wz6d6TjtJcyH79i0UJVA4lsLhHD7bjOC5GsDi7PpbB54ehonx_EKSC_qyVW2sQJ2a-pwzo25cYUX4A5Vfh-fbhsxY/s800/flexible-cover-images.jpg&description=Dos formas para lograr imágenes o vídeos que cubran toda una superficie sin distorsionarse. Imagen y superficie de tamaños y relación de aspecto desconocidos a priori. Efecto conocido como "Flexible cover images/vídeo".){kind=link}
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
diferencias sutiles, muy buen estudio, gracias
ResponderEliminarGracias
ResponderEliminarExcelente articulo, gracias!
ResponderEliminar