Cambiar dinámicamente el tamaño de imágenes con CSS

Publicado en Artículos, Programación,


Tweet about this on TwitterShare on Google+3Share on Facebook0Share on LinkedIn0

A muchos les habrá pasado que al momento de diseñar un sitio/aplicación web y trabajar con imágenes, se han preguntado cómo pueden hacer para que las imágenes se vean bien (en tamaño) sin importar la resolución de la pantalla en donde se presenten, bien sea un monitor de 20 pulgadas, una tablet o un smartphone.

Pueden existir diferentes formas de lograr que dinámicamente las imágenes se amplíen o reduzcan  de acuerdo al tamaño de la pantalla, con hacks o javascript, en lo que conocemos hoy como responsive design o “diseño que se adapta”, pero hoy vamos a ver un método sumamente simple que logra, con sólo 3 líneas de CSS que todas las imágenes que tenga nuestro sitio web se adapten de forma automática.

El código de CSS es el siguiente:

img {
    max-width: 100%;
    height: auto;
    width: auto/9; /* Bug de ie8 */
}

Como vemos, solo basta con especificar el max-width al 100% y el height en automático. La última línea de código es exclusivamente para corregir un bug en IE 8

Esta técnica también se podría usar en videos para cambiar el tamaño de forma dinámica:

    .video embed,
    .video object,
    .video iframe {
    width: 100%;
    height: auto;
}

Un posible problema que se nos puede presentar es que no se puede forzar a un tamaño máximo de forma directa a una etiqueta que contenga una imagen (en caso de que se use alguna). Vamos a ilustrarlo para que se entienda:

<div style="max-width:500px;">
    <img src="imagen.jpg" />
</div>

De esa forma nuestra imagen, que está dentro de la etiqueta div (que permite el uso de max-width) tendrá un tamaño máximo de 500px, por lo tanto nuestra imagen podrá redimensionarse dinámicamente junto al contenedor div

Para los que quieran aprender más sobre el responsive design pueden leerse el artículo Responsive Design with CSS3 Media Queries (en ingles)

Eso es todo por ahora, happy coding!


Cambiar dinámicamente el tamaño de imágenes con CSS
3.36 (67.14%) 14 votos

Etiquetas:


Comentarios (3)

  • draker

    |

    Hola , lo primero saludar y daros la enhorabuena,me parece un sitio el vuestro muy currado y precioso en el aspecto visual.

    En cuanto al tema daros también las gracias por esta solución.

    Seguid con el buen trabajo 😉

    Responder

    • Nando

      |

      Gracias por el comentario Draker

      Saludos

      Responder

  • Bardcrack

    |

    Excelente, solucion sencilla; pero muy util. Me sirvio de mucho.

    Responder

Deja un comentario

Cuanto es 20 + 5 ?
Please leave these two fields as-is:
IMPORTANTE! Necesitas resolver la operación matemática para poder continuar.

Newsletter

Redes sociales

Centro de soporte

Centro de recursos