Swap the image on smaller screens

Question

I have the following code:

<div class="container-fluid">

<h1> Áreas de Atuação </h1> 
<div id="hr-atuacao">
    <hr>


    <div class="card-columns">

    <div class="card-img"> 

    <img class="img-fluid" src="Imagens/saiba-mais-1.png">
    <a id="botao1-card" href="#" class="btn btn-primary">Saiba Mais</a>


    <div class="card-img"> 
    <img class="img-fluid" src="Imagens/saiba-mais-1.png">

    <div class="card-img"> 
    <img class="img-fluid" src="Imagens/saiba-mais-1.png">




        </div>
        </div>




</div>
</div>





<div class="card-columns">

    <div class="card-img"> 
    <img id="civil" class="img-fluid" src="Imagens/saiba-mais-1.png">
    <div class="col-xs-12 hidden-sm hidden-md hidden-lg">  

    <div class="col-xs-12 hidden-sm hidden-md hidden-lg">  
    <img class="img-responsive" src="../../card.jpg" />    <!--Mobile-->
</div>

</div>

    <div class="card-img"> 
    <img class="img-fluid" src="Imagens/saiba-mais-1.png">

    <div class="card-img"> 
    <img class="img-fluid" src="Imagens/saiba-mais-1.png">




        </div>
        </div>




</div>
</div>


<div class="card-columns">

    <div class="card-img"> 
    <img class="img-fluid" src="Imagens/saiba-mais-1.png">

    <div class="card-img"> 
    <img class="img-fluid" src="Imagens/saiba-mais-1.png">

    <div class="card-img"> 
    <img class="img-fluid" src="Imagens/saiba-mais-1.png">




        </div>
        </div>




</div>
</div>



</div>
</div>

Is there any way when I change the screen to mobile devices, the image that appears inside the cards change? I needed to put a smaller and different image when this happens but I have no idea how to do it.

Answer 1

If it were in CSS, I would recommend a search by @media on the site, we have several examples, but as you want to change a content image, let’s go another way.

In HTML5 you can do without relying on Javascript using the properties srcset and sizes tag img.

    Clique em "pagina toda" no snippet, e mexa no tamanho da janela do browser<br>

    <img class="img-fluid"
         src="http://via.placeholder.com/600x400/cccccc/000000"
         srcset="http://via.placeholder.com/400x200/ffff00/000000  400w,
                 http://via.placeholder.com/700x400/ff00ff/000000  700w,
                 http://via.placeholder.com/1200x600/00ffff/000000 1200w"
         sizes="(min-width:1200px) 1200px,
                (min-width: 700px)  700px,
                400px"
    >

The specification is a bit confusing, I’ll try to simplify:

• srcset is a list of sources, comma separated, optionally with a proportional width indicator (ex: 100w); While not mastering the technique, you can use the equivalent in pixels, then it is better a deeper research to understand the difference to the device pixels;

• sizes is a list of media queries and their image sizes. In the example above the image changes when the viewport is more than 700px wide (so the demonstration should be switched between normal and full screen). The last item on the list need not have specification of query.

• src is a fallback, serves to browsers incompatible, and is treated as an image 1x

Official documentation of the MDN:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

See current browser support on CAN I USE.

Answer 2

An alternative is to create two divs, one with the image to mobile and another image for desktop. In div to mobile put the Bootstrap class .visible-xs-* and in the div desktop to class .hidden-xs.

For more information see bootstrap documentation.

Answer 3

Solution CSS

One option is to use your image as your background css(I don’t know if it’s possible in your project):

.class{    background: url('../Imagens/saiba-mais-1.png') no-repeat;}

@media(max-width:600px)/*aqui você define a largura do dispositivo*/
{    .class{    background: url('../Imagens/saiba-mais-menor.png') no-repeat;}    
}

I noticed in your example are 3 images equal, if you use different you can apply the rule defining a idfor each.

Css_media_queries