Logo gigante para mobile

HTML

CSS

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

Matheus Fernando

Curtidas 0

Respostas

Stella Oliveira

Stella Oliveira

07/03/2020

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');
}
GOSTEI 0
Stella Oliveira

Stella Oliveira

07/03/2020

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

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