Evitar que las imágenes se salgan de la pantalla en HTML

  • Autor Autor NASA
  • Fecha de inicio Fecha de inicio
NASA

NASA

VIP
Gamma
Verificación en dos pasos activada
Verificado por Whatsapp
Suscripción a IA
No se como hacer en una web HTML que las imágenes no se salgan de la pantalla del movil.

Creía que poniendo esto era suficiente, pero no :
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 
necesitas usar CSS para manejar el tamaño de las imágenes de manera responsiva

por ejemplo:

<div class="ejemplo">
<img src="imagen.jpg"/>
</div>

Usando max-width :
.ejemplo img {max-width: 100%; height: auto; display: block;}
o
el <div> donde está la imagen sea responsivo :
.ejemplo {max-width: 100%; }
.ejemplo img {max-width: 100%; height: auto; display: block;}
o
usando unidades relativas como vw (viewport width) y vh (viewport height) :
.ejemplo img {width: 100vw; height: auto;}
o
Usando media queries :
@Media (max-width: 600px) {
.ejemplo img {max-width: 100%; height: auto; } }
 
Muchas gracias voy a probar
 
Atrás
Arriba