Como crear imágenes Responsive con CSS

Crear páginas web con imágenes que se adapten a celulares y tablets, es prácticamente indispensable.

Aquí te enseño 4 ejemplos con una técnica simple y efectiva.

Los ejemplos que vamos a ver se basan en el uso simple de HTML, CSS y algo CSS3 al final.

Vamos con el primer ejemplo:

1 – Imagen Responsive Básica

Comenzamos con un DIV contenedor que incluirá una imagen.

<div>
   <img src="image01.jpg" width="960" height="640" />
 </div>

Ahora aplicaremos una serie de reglas con contenedor de dicha imagen para que el mismo tenga un ancho del 96% del ancho de la pantalla, pero que el mismo no supere los 960px.
También le colocamos un margen de 0 para arriba y abajo y AUTO para el izquierdo y derecho. Asi logramos que quede centrado.

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto;
}
img {
width: 100%;
height: auto;
}

También le incluí un ancho del 100% a la imagen y un alto en automatico, con eso logramos que tome el ancho completo del DIV contenedor y la altura se respete proporcionalmente.

RESUMEN: en este ejemplo logramos una imagen responsive (adaptable) pero que no supere los 960px de ancho.

>> Ver ejemplo

2 – Imágenes responsive en columnas

Hay veces que necesitamos que las imágenes se muestren unas pegadas a otras, por ejemplo en una galería de fotos.

Para eso solo debemos colocar la propiedad “display: inline-block” a la etiqueta IMG, y de esta forma se mostraran una al lado de otra.

Pero debemos añadirla algo adicional dependiendo de la cantidad de columnas a mostrar.

Veamos…

Imágenes Responsive a 2 columnas

Para obtener 2 columnas, debemos colocar la propiedad “width: 48%”, que representaría poco menos de la mitad del contenedor (el 2% restante lo usaríamos de márgenes)

Esto lo hacemos creando una clase CSS llamada “two-columns “ y aplicándosela a las imágenes.

Entonces para el HTML seria:

<div>
  <img class="two-columns" src="image01.jpg" width="960" height="640" />
  <img class="two-columns" src="image02.jpg" width="960" height="640" />
</div>

Y para la clase CSS:

.two-columns {
width: 48%;
display: inline-block;
}

Imágenes Responsive a 3 columnas

Para obtener 3 columnas supongo que ya habrás deducido como es. Solo creamos otra clase modificando el porcentaje de ancho a 32%.

Para el HTML:

<div>
<img class="three-columns" src="image01.jpg" width="960" height="640" />
<img class="three-columns" src="image02.jpg" width="960" height="640" />
<img class="three-columns" src="image03.jpg" width="960" height="640" />
</div>

Y para el CSS:

.three-columns {
width: 32%;
display: inline-block;
}

>> Ver ejemplo

3 – Imágenes con Breakpoints

Aquí nos introducimos de lleno en Responsive Design usando un poco de CSS3.

Los breakpoints se usan para realizar cambios en la visualización de una pagina web, dependiendo del ancho del dispositivo donde se esté viendo.

Crearemos 4 imágenes que se mostrarán en 1 columna en dispositivos pequeños (teléfonos inteligentes ), en 2 columnas en dispositivos medianos (tablets), y en 4 columnas en grandes dispositivos (equipos de escritorio).

Creamos la estructura HTML de 4 imágenes y le aplicamos una clase que crearemos llamada “breakpoint”:

<div>
<img class="breakpoint" src="image01.jpg" width="960" height="640" />
<img class="breakpoint" src="image02.jpg" width="960" height="640" />
<img class="breakpoint" src="image03.jpg" width="960" height="640" />
<img class="breakpoint" src="image04.jpg" width="960" height="640" />
</div>

Y luego los CSS para cada ancho de pantalla:

/* 1 columna para smartphones */
breakpoint  {
max-width: 100%;
display: inline-block;
}
/* 2 columnas para tablets */
@media (min-width: 420px) {
breakpoint  {
max-width: 48%;
}
}
/* 4 columnas para grandes dispositivos*/
@media (min-width: 760px) {
breakpoint  {
max-width: 24%;
}
}

>> Ver ejemplo

4 – Imagen responsive de ancho completo

Para obtener imágenes responsive de ancho completo, lo único que hay que hacer es configurar el ancho del DIV contenedor de la imagen a 100% o dejarlo sin ancho.

Y luego a la etiqueta de la imagen colocarle un ancho del 100%.

En CSS:

.container {
width: 100%;
}

En HTML:

<div class="container">
<img  src="image01.jpg" width="100%" />
</div>

De esta forma hemos realizado 4 ejemplos de adaptación de imágenes responsive.

Descarga AQUI  los códigos de ejemplo para usarlos directamente en tus páginas:

[sociallocker id=»2457″] ** Descargar ejemplos **
[/sociallocker]

PARA TERMINAR

Este ejemplo es una pequeña parte de mi curso completo de Responsive Design.

Si quieres aprender a crear sitios web completamente adaptables a móviles, sea el diseño que sea,  te recomiendo mi curso “Responsive Design desde Cero”.

En el mismo te enseño con un ejemplo real, a crear páginas web cuyos elementos se adapten automáticamente al dispositivo con el que se lo esté navegando.

>> Mira los detalles del curso <<