Redimensionar imágenes en CSS
1 seguidor
Estoy empezando en esto de CSS. He buscado pero no he encontrado nada que se refiera a esto exactamente. El tema es el siguiente: Si maqueto una web con CSS y utilizo medidas relativas (ems o %) al disminuir el tamaño de texto en el navegador ("comando" y "-", en mac) todas las cajas y textos se redimensionan correctamente, excepto las imágenes, que mantienen su tamaño original (incluido en la etiqueta img de HTML). ¿Hay alguna forma de hacer que se redimensione la visualización de las imágenes (en CSS)? En la página incial de DOMESTIKA, por ejemplo, si que cambia el tamaño de las imágnes de los COOLSITES y demás. He intentado destriparlo pero hay demasiados estilos y me pierdo.
javier_pinol
Gracias Sanyaissues, es exactamente lo que estaba buscando. Todo esto venía por un intento de visualizar una web en un teléfono móvil. No se si es el método adecuado, seguiré investigando.
Usuario desconocido
Puedes declarar el tamaño de una imagen usando em o porcentajes. Si usas algo como:
css:
img{width:100%;}
html
La imagen ocupará el 100% del espacio que le sea asignado. De esta forma cuando, a través del navegador, varíes el tamaño de las fuentes del sitio la imagen también cambiará de tamaño. Huelga decir que puedes usar una clase y em's para lograr el mismo efecto:
css:
img.miclase{width:20em;}
html
javier_pinol
Gracias mambrú, lo he probado pero no funciona, las imágenes mantienen su tamaño original. Seguiré dando vueltas al asunto a ver si encuentro solución.
Usuario desconocido
No le pongas las medidas a las imágenes en la etiqueta img. No es necesario. Tu código va a seguir validando.
Las medidas de la imagen ayudan al navegador a la hora de interpretarlo, pero como te digo, no es necesario.