Logo gigante para mobile

07/03/2020

Gostaria de saber como fa�o para redimensionar a logo gigante que aparece tapando o conte�do do site nos dispositivos mobile http://odontologiacalixto.com.br/

Matheus Fernando

Curtir t�pico + 0

Responder

Posts

12/03/2020

Stella Oliveira

Ol�, para renderizar a imagem conforme o tamanho da tela, segue exemplo:

HTML:

<div>
   <img id="imagem" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />
</div>

CSS:

.imgMax {
   width: 100%;
}
.imgMin {
  width: 50%;
}

JAVASCRIPT:

var idImage = document.getElementById("imagem");

if (screen.width <= 800 || screen.height <= 600) {
    idImage.classList.toggle('imgMin');
}
else {
    idImage.classList.toggle('imgMax');
}

Responder

Gostei + 0

12/03/2020

Stella Oliveira

Voc� tamb�m pode usar media-queries pra fazer o trabalho de mudar o tamanho da imagem

@media(max-width: 700px) {
  #img {
   width: 30px
 }
}

Responder

Gostei + 0