1

Estou tentando assim porém não funciona

<head>
    <title>Woman</title>

    <style>

        body{
            background: black;   
        }

        @media screen and (max-width: 767px) 
        {
            .mobile 
            {
                background-image: url ("imgmobile.jpg");
                display: block;
            }
            .desktop 
            {
                background-image: url ("imgdesktop.jpg");
                display: none; 
            }
        }

        @media screen and (min-width: 767px) 
        {
            .mobile 
            {
                background-image: url ("imgmobile.jpg");
                display: none;
            }
            .desktop 
            {
                background-image: url ("imgdesktop.jpg");
                display: block; 
            }
        }


    </style>
</head>

<body>
    <a href="https://www.w3schools.com">

        <div class="mobile">
            <img src="">
        </div>

        <div class="desktop">
            <img src="">
        </div>

    </a>        
</body>

1
  • Eu recomendaria less/scss, que fazem isso de maneira dinâmica.
    – Marcelo
    17/04/2017 às 14:34

5 Respostas 5

1

Com apenas HTML e CSS , não é possível alterar o src de imagem. Se você não substituir a tag img com tag div, então você pode ser capaz de alterar a imagem que é definida como o plano de fundo como

//Apenas exemplo de como implementar via javascript

function desktop() {
  document.getElementById('my-img').src = 'http://placehold.it/200/3f1';
}

function mobile() {
  document.getElementById('my-img').src = 'http://placehold.it/640/cf1';
}

// ref. https://stackoverflow.com/a/11381730/3706998
function mobilecheck() {
  var check = false;
  (function(a) {
    if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
  })(navigator.userAgent || navigator.vendor || window.opera);
  return check;
}

if (mobilecheck()) {
  mobile();
} else {
  desktop();
}
@media screen and (max-width: 639px) {
  .mobile {
    background-image: url('http://placehold.it/200/3f0');
    background-color: #3f0;
    background-position: center;
    background-size: cover;
    display: block;
    width: 200px;
    height: 200px;
  }
  .desktop {
    background: none;
    display: none;
  }
}

@media screen and (min-width: 640px) {
  .mobile {
    background: none;
    display: none;
  }
  .desktop {
    display: block;
    background-image: url("http://placehold.it/640/cf0");
    background-color: #cf0;
    background-position: center;
    background-size: cover;
    width: 640px;
    height: 640px;
  }
}
<!DOCTYPE html>
<html>

  <head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  </head>

  <body>
<h1>CSS</h1>
<a href="https://www.w3schools.com">			
			<div class="mobile"></div>
			
			<div class="desktop"></div>
</a>
<h1>JS</h1>
<a href="https://www.w3schools.com">			
 <img id="my-img" src="http://placehold.it/1/000" />
</a>
  </body>

</html>

Plunker: http://plnkr.co/edit/O3sio14WYS07JRlkQdIl?p=preview

Você poderia estar colocando 2 img com src, e escondendo uma imagem após a outra, porém isso faria com que sua página carregasse 2 imagens no loader ao invés de uma, o que implicaria em problemas de performance. Olhando por esse lado, o css media não irá carregar os 2 backgrounds em todos os tamanhos. É possível ver esse comportamento nesta resposta[ENG]: https://stackoverflow.com/a/16961944/3706998

Ou, você pode usar javascript, então você deve ser capaz de alterar o src da tag img como abaixo, e então por em algum script de detecção de mobile.

function desktop() {
    document.getElementById('#my-img').setAttribute('src', 'http://i.imgur.com/3dIpk0X.jpg');
}
function mobile() {
    document.getElementById('#my-img').setAttribute('src', 'http://i.imgur.com/3dIpk0X.jpg?=1');
}

E no html vc adiciona uma imagem de "preload" pode ser um gif transparente 1x1:

<img id="my-img" src="blank.gif" />

E aplica algum script de detecção mobile como descrito nessa resposta aplicando uma lógica básica de mobile ou destktop[ENG]: https://stackoverflow.com/a/11381730/3706998

function mobilecheck() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

if(mobilecheck()){
    mobile();
}else{
    desktop();
}

O script javascript acima, só testa o navegador, não achei nenhum script que testasse melhor o tamanho da tela, o que torna ele não muito responsivo.

Recomendo o uso do CSS, é mais prático e sem muitas lógicas de programação e 100% responsivo.

5
  • 1
    Verdade, o carregamento em Mobile é sempre uma preocupação. Só uma dúvida, rodei o código que você postou e a imagem não apareceu, o que preciso fazer para ela aparecer?
    – Juan Lima
    19/04/2017 às 13:33
  • Não, no código HTML mesmo. Não cheguei a testar a segunda opção pois ainda não tenho a opção de usar o JavaScript
    – Juan Lima
    19/04/2017 às 14:13
  • Vou adicionar isso em um site de testes e posto ele funcionando. Me dê alguns minutos. 19/04/2017 às 14:21
  • Ok, muito obrigado!!
    – Juan Lima
    19/04/2017 às 14:57
  • Atualizei com o snippet, dá para ver bem o funcionamento do js e do CSS e assim como o impacto de cada um no carregamento. 19/04/2017 às 15:24
1

Você pode fazer com o source do html sem uso de css, segue o código abaixo:

  • Quando a tela tiver no máximo 479px mostra a imagem-mobile.jpg

  • Quando a tela tiver no mínimo 480px mostra a imagem.jpg Caso

  • Caso contrário mostra a imagem-default.jpg

     <picture>
             <source srcset="imagem.jps" media="(min-width: 480px)">
              <source srcset="imagem-mobile.jpg" media="(max-width: 479px)">
             <img src="imagem-default.jpg">
    </picture>
    
0

O background-image não altera o atributo src da tag img. Caso queira irá precisar de JS. Observando seu código você pode fazer assim:

    <head>
    <title>Woman</title>

    <style>

        body{
            background: black;   
        }

        .desktop{
            display: none;
        }

        @media screen and (min-width: 767px) 
        {
            .mobile 
            {
                display: none;
            }
            .desktop 
            {
                display: block; 
            }
        }


    </style>
</head>

<body>
    <a href="https://www.w3schools.com">

        <div class="mobile">
            <img src="imgmobile.jpg">
        </div>

        <div class="desktop">
            <img src="imgdesktop.jpg">
        </div>

    </a>        
</body>

Obs.: Se ocultar usando CSS a requisição ainda é feita. Tentem evitar essa pratica.

Para essa questão o https://github.com/scottjehl/picturefill é minha escolha.

2
  • Isso resolve o problema, porém trás uma implicação na performance do carregamento da página trazendo 2 imagens ao invés de 1. Se tratando de mobile, qualquer Kb conta. Usando o css media não irá carregar os 2 backgrounds na mesma requisição, a não ser que haja troca do tamanho da página como pode ser notado nessa página de testes cloudfour.com/examples/mediaqueries/image-test/#t5 17/04/2017 às 13:17
  • @LeonanCarvalho O exemplo foi mais para ele entender mesmo.. 17/04/2017 às 13:18
0

As respostas anteriores são todas válidas. Porém seguem minhas dicas. O seu código está na linha certa, porém tem algumas falhas veja minhas observações.

Essa parte do código está com erro de sintaxe, fora isso a imagem deve estar no mesmo diretório da página. Mais uma coisa, coloque o tamanho do div, width e height senão não vai aparecer a imagem.

        .mobile 
        {
            background-image: url background-image: url 
            ("imgmobile.jpg");
            display: none;
        }

Corrigindo ficaria assim:

        .mobile 
        {
            background-image: url("imgmobile.jpg");
            display: none;
            width: 56px;
            height: 56px;
        }

Utilize essa linha de raciocínio para o restante do código.

0

Com um simples javascript você resolve isso:

Na Head do seu documento:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   document.write('<link rel="stylesheet" type="text/css" href="mobile.css" />');
}else{
    document.write('<link rel="stylesheet" type="text/css" href="desktop.css" />');
}

Na body do seu documento:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    document.write('<div class="mobile"><img src="imgmobile.jpg"></div>');
}else{
    document.write('<div class="mobile"><img src="imgdesktop.jpg"></div>');
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .