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.
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;
}
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%;
}
}
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.
