7

Tenho o seguinte código:

<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>

Existe algum jeito de quando eu mudar a tela para dispositivos móveis, a imagem que aparece dentro dos cards mude? Eu precisava colocar uma imagem menor e diferente quando isso acontecer mas não tenho ideia de como fazer isso.

1

3 Respostas 3

9

Se fosse em CSS, eu recomendaria uma pesquisa por @media no site, temos vários exemplos, mas como você quer alterar uma imagem de conteúdo, vamos por outro caminho.

Em HTML5 você pode fazer sem depender de JavaScript usando as propriedades srcset e sizes da 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"
    >

A especificação é meio confusa, tentarei simplificar:

  • srcset é uma lista de sources, separada por vírgula, opcionalmente com um indicador de largura proporcional (ex: 100w); Enquanto não dominar a técnica, pode usar o equivalente em pixels, depois é melhor uma pesquisa mais profunda para entender a diferença para os device pixels;

  • sizes é uma lista de media queries e respectivos tamanhos de imagem. No exemplo acima a imagem muda quando a viewport tem mais que 700px de largura (por isso a demonstração deve ser alternada entre tela normal e cheia). O último ítem da lista não precisa ter especificação de query.

  • src é um fallback, serve para browsers incompatíveis, e é tratado como uma imagem 1x

Documentação oficial da MDN:

https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/img

Veja o suporte atual dos browsers no CAN I USE.

0
7

Uma alternativa é criar duas divs, uma com a imagem para mobile e outra imagem para desktop. Na div para mobile colocar a classe do Bootstrap .visible-xs-* e na div para desktop a classe .hidden-xs.

Para mais informações veja a documentação do Bootstrap.

4

Solução CSS

Uma opção é usar sua imagem como background no teu css(não sei se é possível no teu projeto):

.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;}    
}

Reparei que no teu exemplo são 3 imagens iguais, se for usar diferente você pode aplicar a regra definindo um idpara cada.

CSS_Media_queries

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 .