Switch the image on smaller screens

Question

Switch the image on smaller screens

Navigation

#1 by (6 votes)
#2 by (5 votes)
#3 by (4 votes)

4

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 I can change the screen for mobile devices, the image that appears inside the cards changes? I needed to put a smaller and different image when this happens but I have no idea how to do it.

javascript html css bootstrap

asked by anonymous 07.10.2017 / 18:51

3 answers

What is the programming language for creating Android applications? Sending characters through the serial port including zero-value bytes

score 6 · Answer 1

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

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

    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 spec is a bit confusing, I'll try to simplify it:

srcset is a comma-separated list of sources , optionally with a proportional width indicator (eg: 100w); While not mastering the technique, you can use the equivalent in pixels , then a deeper search is better to understand the difference to device pixels
sizes is a list of media queries and their image sizes. In the above example 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 in the list does not have query specification.

Official MDN documentation:

link

See the current browser support on CAN I USE .

score 5 · Answer 2

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

For more information, see the Bootstrap documentation .

score 4 · Answer 3

CSS Solution

One option is to use your background image in your css (I do not 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 that in your example are 3 equal images, if you use different you can apply the rule by setting id to each.

CSS_Media_queries