1

Estou querendo deixar as imagens dos slider do Materialize todas com o mesmo tamanho, mas não estou obtendo sucesso. Deixei esse código para deixar o slider responsivo, só que as imagens estão com tamanhos diferentes.

CSS

.section-slide .slider .slides{
    background-color: transparent;
    margin: 0;
    height: 700px;
}
.section-slide .slider .slides li img{
    height: 100% !important;
    width: 100% !important;
    background-position: top;
    background-size: 100% auto !important;
    background-repeat: no-repeat;
}

HTML

<section class="section-slide">
    <div class="slider">
        <ul class="slides">
            <li>
                <img src="img/music10.jpeg" class="responsive-img"> 
                <div class="caption center-align top-setting">
                    <h3>Share Sound</h3>
                    <div class="divider-cap divider"></div>
                    <h5 class="light grey-text text-lighten-3">Proporcionando o conhecimento musical,<br>ajudando e produzindo sempre.</h5>
                </div>
            </li>

            <li>
                <img src="img/music9.jpeg" class="responsive-img"> 
                <div class="caption left-align">
                  <h3>Left Aligned Caption</h3>
                  <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                </div>
            </li>

            <li>
                <img src="img/music4.jpg" class="responsive-img"> 
                <div class="caption right-align right-setting">
                  <h3>Seja sempre o primeiro.</h3>
                  <h5 class="light grey-text text-lighten-3">Produza mais e seja reconhecido !</h5>
                </div>
            </li>
            <li>
                <img src="img/music12.jpeg" class="responsive-img"> 
                <div class="caption center-align">
                  <h3>This is our big Tagline!</h3>
                  <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
                </div>
            </li>
        </ul>
    </div>
</section>

JQuery

$(document).ready( function(){
    $('.button-collapse').sideNav(); // Side Nav Mobile
    $('.modal').modal(); // Modal
    $('.slider').slider({
        interval: 6000,
        height: 700
    }); 
6
  • No seu HTML não tem .section-slide .slider
    – Sam
    Commented 10/01/2018 às 0:28
  • Ah sim, é porque tem uma section antes. Eu só não coloquei aqui.
    – Monroe Say
    Commented 10/01/2018 às 0:34
  • Mas não estão do mesmo tamanho na largura ou na altura?
    – Sam
    Commented 10/01/2018 às 0:37
  • Não, principalmente quando redimensiona a janela, da pra perceber como a altura delas ficam muito diferente. Eu acho que isso pode ser por causa do tamanho original da imagem.
    – Monroe Say
    Commented 10/01/2018 às 0:38
  • Pode ser... o script transforma as imagens em background e corta as que forem maiores que a área do slider
    – Sam
    Commented 10/01/2018 às 0:40

1 Resposta 1

0

O slider converte as imagens em background-image.

O problema é que se você usar imagens em diferentes dimensões, o script irá ajustar a largura para 100% mantendo a proporção da imagem e cortar a parte de baixo que ultrapassar os 700px que você definiu na class .slides.

Solução:

Altere o background-size para 100% 100% !important; no CSS .section-slide .slider .slides li img{ que o script irá ajustar a largura e altura, mas não manterá a proporção (aspect ratio). Por isso a importância de colocar imagens com mas mesmas dimensões para manter a proporção.

$(document).ready( function(){
    $('.button-collapse').sideNav(); // Side Nav Mobile
    $('.modal').modal(); // Modal
    $('.slider').slider({
        interval: 6000,
        height: 700
    }); 
});
.section-slide .slider .slides{
    background-color: transparent;
    margin: 0;
    height: 700px;
}
.section-slide .slider .slides li img{
    height: 100% !important;
    width: 100% !important;
    background-position: top;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<section class="section-slide">
<div class="slider">
<ul class="slides">
    <li>
        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" class="responsive-img"> 
        <div class="caption center-align top-setting">
            <h3>Test</h3>
            <div class="divider-cap divider"></div>
            <h5 class="light grey-text text-lighten-3">Hello World !.</h5>
        </div>
    </li>

    <li>
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e0/JPEG_example_JPG_RIP_050.jpg" class="responsive-img"> 
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
    </li>

    <li>
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Sunflower_from_Silesia2.jpg" class="responsive-img"> 
        <div class="caption right-align right-setting">
          <h3>Seja sempre o primeiro.</h3>
          <h5 class="light grey-text text-lighten-3">Produza mais e seja reconhecido !</h5>
        </div>
    </li>
    <li>
        <img src="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg" class="responsive-img"> 
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
    </li>
</ul>
</div>
</section>

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 .