Duvida WebDevolped

Xcape

Membro
Boas tardes a todos!

Queria saber como é que oculto uma imagem a partir de uma determinada dimensão (O site é responsivo), e queria que quando fosse para o tamanho de tablet/mobile uma certa imagem desaparecesse.

Aguardo Resposta...

Cumprimentos
 
Olá,

Defines um id à tua imagem e depois usas o CSS para que ela desapareça a uma certa resolução tal como queres.

HTML:
<img src="img.jpg" alt="img" id="img">

@media(max-width:480px){

#img {display:none}

}
 
Se for para utilizar mesmo só numa imagem não muito pesada, podes fazer dessa forma.
É que assim estás a carregar a imagem na mesma, apenas não está visível. Ou seja, quem aceder ao site gasta trafego com conteúdo que não interessa.
Se vais fazer isso a muitas imagens é melhor optares por outra solução, podes por exemplo utilizar este plugin que carrega as imagens que pretendes em cada tamanho.. (por exemplo: Em mobile carregas a imagem 400px, depois já tens uma maior a 800px, ... e por aí fora) de forma a evitar carregar imagens muito grandes em display pequenos sem necessidade. (Podes também não carregar imagem em X tamanho).

Carregas o "response.min.js".

Na tag body metes:
HTML:
<body data-responsejs='{
"create": [{
  "prop": "width",
  "prefix": "min-width- r src",
  "breakpoints": [0, 440, 780, 1296]
}]
}'>

E no sitio da imagem passa a:
HTML:
<div data-min-width-0='<img src=image-small.jpg>' data-min-width-440='<img src=image-medium.jpg>' data-min-width-780='<img src=image-big.jpg>' data-min-width-1296='<img src=image-extraBig.jpg>'></div>


Edit: Mas se for só para uma imagem (não pesada) faz como o Jonathan disse.. ;)
 
Back
Topo