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.