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.
- /* Esta imagen de adapta al ancho de lo que lo contenga con un máximo de 600px */
- img{
- width:100%;
- max-width:600px;
- }
- /* Este es el segundo método */
- img{
- max-width:100%;
- }
Fuente: http://xitrus.es/blog/34/Responsive_Desing:_adaptar_im%C3%A1genes