Imágenes, tablas y vídeos adaptables para eso del responsive

Este es un truco sencillo con el que completar nuestra plantilla elástica (adaptable, responsive, sensible o como demonios se llame...), de manera que no sólo las columnas vayan cambiando de ancho a medida que ampliamos o disminuimos la ventana, sino que también lo hagan las imágenes e incluso los vídeos que dichas columnas contengan.

El texto es lo único que se adapta automáticamente sin necesidad de incluir código extra, pero para otros elementos sí que necesitamos añadidos. Además -para no variar- cada navegador se comporta de manera algo distinta así que a veces resulta algo difícil dar con la tecla de qué es lo justo y necesario que hay que añadir para que todo vaya bien.

Lo siguiente es lo que yo uso con un buen resultado desde hace tiempo en distintos navegadores. Sin embargo, como no he podido comprobar todas las versiones espero que el que tenga otras distintas de Chrome23, Firefox16 o IE9, se manifieste al respecto.

---

Lo más fácil son las imágenes aisladas y con ese adjetivo me refiero a las que no tienen pie de imagen. Sólo hace falta buscar el contenedor de las entradas (en Blogger generalmente .post-body) y añadir en nuestro CSS estas declaraciones:

.post-body img {
max-width: 100%;
width: auto;
height: auto;
}

Para salvar que Blogger inserta código extra al subir una imagen desde el editor y que lo anterior pueda no funcionar, los que usamos esta plataforma añadiremos también el selector .separator. Además, para evitar que ese margen a izquierda y derecha que igualmente inserta el editor, nos pegue totalmente la imagen a la derecha al reducirla, mi opción es sólo ocupar una parte del total. En concreto el 94% que vi que quedaba bien:

.post-body img, .separator a {
max-width: 94%;
width: auto;
height: auto;
}

Haz más pequeña tu ventana actual para ver el resultado con esta imagen. Con los siguientes elementos que encontrarás avanzando en el post también podrás probar.

Aquí se puede comprobar que una imagen con float también se adapta cuando el texto circundante ya no cabe en el ancho disponible.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare pretium metus, a ornare diam interdum id. Aliquam euismod consectetur libero, non interdum enim fermentum eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque magna libero, sollicitudin vitae viverra venenatis, varius vel sapien. Aliquam euismod nulla id tellus laoreet nec ornare tellus tempus. Aenean aliquam bibendum metus nec auctor. Curabitur adipiscing tellus facilisis tortor adipiscing a posuere sem mollis.

---

Al principio no hablé de las tablas, pero también podemos hacer que se adapten a su contenedor. Además, en Blogger las imágenes con leyenda van dentro de estos elementos por lo que si no queremos que estas escapen de nuestro control, también las tenemos que formatear.

En general será suficiente con usar el primer selector, pero una vez más, en esta nuestra amada plataforma tendremos que añadir el segundo por lo ya comentado de que hacen un poco lo que les da la gana:

.post-body table, table.tr-caption-container img {
width: 100%;
border-collapse: collapse;
}

Pie de imagen de una bonita idem

---

Y para terminar un truco ingenioso que vi en A list apart y que sirve para poder redimensionar automáticamente vídeos, lo más complicado de todo.

El problema radica en poder mantener la proporción, porque si bien con el ancho se puede hacer lo mismo que con las imágenes, el alto se resiste a seguir la pauta.

A diferencia de los anteriores, este sistema requiere añadir un par de cajas manualmente a la que forma el vídeo, pero merece la pena hacerlo si incluyes vídeos en tu entradas de forma esporádica para tener un diseño totalmente elástico... o como sea.

Ese extraño 56,25% en el padding-bottom es para guardar la proporción 16:9 (divídanse ambas cifras en orden inverso).

.video-wrapper {
width: 600px;
max-width: 100%;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div class="video-wrapper"><div class="video-container">
CODIGO IFRAME U OBJECT
</div>
</div>

Con iframe:

Con object (código antiguo YouTube):

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter