
Como hacer tus imágenes, videos y mapas responsivos con CSS
Con más de la mitad del tráfico web viniendo de dispositivos móviles, tener un sitio web que se adapte a éstos dispositivos(responsivo) ya no es una opción, y como desarrolladores tenemos que aprender nuevas técnicas y trucos para hacer que nuestros sitios luzcan lo mejor posible.
Una de ésas técnicas o trucos es, como hacer que tus imágenes, videos e incluso mapas, se adapten siempre al espacio disponible manteniendo su proporción. El truco en sí consiste en incluir las imágenes/videos/mapas en un contenedor, al cual le colocaremos un padding inferior (puede ser superior también) con el porcentaje correspondiente de acuerdo a la altura del objeto, el porcentaje lo sacamos con una regla de 3 tomando en cuenta que el 100% es el ancho total del objeto, por lo que la fórmula quedaría de la siguiente forma: padding = (alto_objeto x 100)/ancho_objeto
.
De manera que si tenemos una imagen que tiene 800px de ancho y 350px de alto, nuestro padding sería 43.75% (x=350*100/800)
, el resto del truco, es hacer que el objeto tenga una posición absoluta que se adapte siempre al ancho de su contenedor, les dejo el código:
.img-wrapper { max-width: 100%; overflow: hidden; padding-bottom: 50%; position: relative; } .img-wrapper iframe, .img-wrapper img { height: 100%; left: 0; width: 100%; position: absolute; top: 0; }
También puedes ver este demo de ejemplo.
Conclusión
Como puedes ver en el código, este pequeño truco funciona para videos y mapas incrustados a través de un iframe, YouTube y GoogleMaps usan iframes, así que no debes tener ningún problema.
Si tienes alguna duda o sugerencia, no olvides dejar tus comentarios.
Para comentar debe estar registrado.