10

10

Responsive Desing: adaptar imágenes

Hoy el artículo me lo ha propuesto @Johan6Smith, que necesita saber como adaptar imágenes a distintos anchos de pantalla, y aprovecho para decir que podéis proponerme cualquier tema, que en la medida de lo posible intentaré resolveros.
Bueno, este tema ya lo he tratado varias veces y expliqué en términos generales como hacer un Responsive Design pero ahora me centraré en como adaptar una imagen a ancho y también al alto de la pantalla.

El tamaño original

Para hacer que una imagen se adapte a distintos anchos o alto de pantalla (o de contendedor en el que se encuentra) debemos de usar varias de las propiedades CSS y podemos hacerlo de dos formas, la siguiente es en la que establecemos el ancho de la imagen:

• Debemos de usar primero width o height para controlar el tamaño, pero en este caso para que se adapte correctamente lo estableceremos al 100%.
• Al establecer un tamaño al 100% puede que se haga demasiado grande, por eso estableceremos el tamaño máximo con max-width y max-height.

Y en este método la imagen tendrá su tamaño original, y no hará falta que le establezcamos el tamaño (es como se adaptan todas las imágenes de este blog, podéis comprobarlo):

• En este caso establecemos el max-width o max-height (este último no lo uso en ningún momento, pero lo explico igual por si a alguien le hace falta) al 100%, por lo que la imagen va a tener su tamaño original, pero nunca sobrepasará el ancho del contendedor.

1. /* Esta imagen de adapta al ancho de lo que lo contenga con un máximo de 600px */
   
2. img{
   

width:100%;


max-width:600px;


3. }
   
5. /* Este es el segundo método */
   
6. img{
   

max-width:100%;


7. }
   

Tamaños establecidos

En el caso de esta web si la visualizas en una pantalla inferior a 1200px de ancho la página se adapta al tamaño, por lo que si se reduce tanto el ancho como para que la imagen no entre se reducirá, pero podemos encontrarnos en otros casos, como en el que según varios tamaños establezcamos el un tamaño u otro a la imagen, voy a poner varios ejemplos:

• Nuestra web está hecha para 1000px de ancho, y la imagen de la cabecera en este caso tendrá 200px de ancho.
• Cuando la web es inferior a los 1000px pasa a tener 180px de ancho.
• Y cuando el ancho es inferior a 400px la imágen sera del 100% de ancho y ocupara toda la parte superior.

En este caso la mejor forma de hacerlo seria usando las @media queries ya que con ellas podemos establecer según el ancho de pantalla que queramos unas propiedades a un elemento u otro.

1. /* El tamaño por defecto de 200px ya estaría establecido previamente */
   
2. @media all and (max-width: 1000px){

img{


width:180px;


}


3. }
5. @media all and (max-width: 400px){

img{


width:100%;


}


6. }