Evitar que as imagens saiam da tela em HTML

  • Autor Autor NASA
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
NASA

NASA

Gamma
Verificación en dos pasos activada
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">
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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
 
Voltar
Topo