El concepto de “Web Responsive” es un, podríamos decir, subconjunto de las WebApp. Es decir diseñar una página Web de forma que se auto escale el tamaño de las imágenes, de las fuentes, de los vídeos y de la estructura del interface para que pueda ser consumida desde cualquier resolución de pantalla. O de casi cualquiera.
Esto es un viejo sueño de los principios del desarrollo en html, y que se había conseguido en la mayoría de los casos para las resoluciones por defecto en desktop. Pero llegaron los dispositivos móviles y sus resoluciones de 800 pixeles de alto (y menos) y la cosa se ha puesto color hormiga.
Y más con la llegada de HTLM5 y CSS3 que han enviado al cajón de los recuerdos parámetros en objetos HTML que llevaba utilizando más de una década.
Hete aquí que estoy haciendo un pequeño desarrollo de una web simple en donde quiero mostrar un logotipo y cuatro fotos, pero me encuentro que debo poder auto escalar las imágenes para que se vean bien tanto en mi portátil con 1300px de ancho, como en mi windows phone con 400px. Y ya no tengo el tag size en el objeto img.
Googleando he encontrado que la solución es híper sencilla y me funciona (en teoría debería funcionar en todos los navegadores actuales). Añadir al objeto imagen, por style o por css, la siguiente línea:
<img src="logotipo.png" alt="Imagen del logotipo" style="max-width: 100%;" />
Exacto, el truco es en declarar que la imagen tiene el estilo max-width:100%. Así se visualiza a su tamaño original mientras halla espacio, y se auto escala según se va quedando sin el. Y funciona muy bien.
Ojo, no sé cómo se verá en una blackberry o en smartphone antiguos que no soporten esta propiedad de CSS3.
Espero que sea de utilidad.