1

Tenho um banner rotativo conforme o código abaixo. Por enquanto ele só tem uma imagem:

<section id="main-slider" class="no-margin">
    <div class="carousel slide">
        <div class="carousel-inner">
            <div class="item active" style="background-image: url(images/slider/bg1.png)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-5 pull-right">
                            <div class="carousel-content" style="text-align: center">
                                <h2 class="animation animated-item-1"><span style="color: #FFE805">Aqui</span> <br><span>é o título</span></h2>
                                <div align="center">
                                <h3 class="animation animated-item-1"><span style="color: #FFE805">Aqui subtítulo</span></h3>
                            </div>
                            </div>
                        </div>                               
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Porém nas versões mobile, a imagem do banner fica muito grande. Como eu poderia fazer para que dentro do CSS eu incluísse essa imagem em acesso desktop e no modo mobile aparecesse outra imagem? Estou usando o Bootstrap 3.

2 Respostas 2

3

1: The Viewport

Adicione a viewport dentro da tag head:

<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=10, minimum-scale=1.0">

2: CSS @media Rule

<style type="text/css">
    @media screen and (max-width: 500px) {
        /* estilos para dispositivos/resoluções com largura até 500px */
        .foo {
            background-image: url(images/slider/bg1.png);
        }
    }
    @media screen and (min-width: 500px) and (max-width: 900px) {
        /* estilos para dispositivos/resoluções com largura entre 500px e 900px */
        .foo {
            background-image: url(images/slider/bg2.png);
        }
    }
</style>

Agora só aplicar isso no seu layout.

3
  • Olá LipESprY. Certo. Usei seu código, mas quando tiro a referência style dessa linha <div class="item active" style="background-image: url(images/slider/bg1.png)">, deixando assim: <div class="item active">, a imagem não aparece.
    – user24136
    Commented 12/02/2018 às 17:45
  • 1
    Provavelmente ela não apareça por não ter nenhum conteúdo. A imagem exibida nessa div é um fundo, não um conteúdo. Tenta colocar algo dentro dessa div pra experimentar. Ex: &nbsp;
    – LipESprY
    Commented 12/02/2018 às 17:47
  • Perfeito. Troquei .foo por #main-slider .carousel .item.active e funcionou. Muito obrigado.
    – user24136
    Commented 12/02/2018 às 17:50
0

Tente adicionar as propriedades width: 100%; height: auto na div cuja a imagem é setada e vê se funciona.

Pode ser que funcione também usando a classe img-responsive (ou img-fluid se estiver usando bootstrap na versão 4).

2
  • Olá Cristiano. O problema na verdade era a imagem ser diferenciada nas versões mobile. Como CSS não é muito meu forte, a resposta do LipESprY resolveu. Obrigado.
    – user24136
    Commented 12/02/2018 às 18:07
  • Entendo, que bom que tudo se resolveu. #TMJ
    – user62591
    Commented 14/02/2018 às 11:07

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