2016-02-22 13 views
5

Sto avendo questo problema dove l'immagine rimane a sinistra, l'ho già inizializzata nel mio js, ​​ho provato a cambiare le dimensioni dell'immagine, usato diversi browser, e ha lo stesso risultato. Qualcuno può aiutarmi a risolvere questo?Parallax Image non riempie la larghezza - Materialize

HTML

<nav class="#607d8b blue-grey"> 
    <div class="nav-wrapper container"> 
    <!-- <a href="#!" class="brand-logo">Interaq</a>--> 
    <ul class="left hide-on-med-and-down"> 
     <li><a href="#">HOME</a></li> 
     <li><a href="#">GAMELIST</a></li> 
     <li><a href="#">REVIEWS</a></li> 
      <li><a href="#">NEWS</a></li> 
     <!-- Dropdown Trigger --> 
    <!-- <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>--> 
    </ul> 

    <!--Search bar--> 
    <form class="right hide-on-med-and-down"> 
     <div class="input-field"> 
     <input id="search" type="search" required> 
     <label for="search"><i class="material-icons">search</i></label> 
     <i class="material-icons">close</i> 
     </div> 
    </form> 
    </div> 
</nav> 


<div class="parallax-container"> 
     <div class="parallax"><img src="<?php echo base_url();?>materialize/img/banner1.jpg"></div> 
</div> 

Risultato

enter image description here

risposta

2

Provalo. Errore è stato il segno uguale dopo larghezza proprietà in risposta Krushio Vida.

<div style="width:100%;" class="parallax-container"> 
    <div class="parallax"> 
     <img src="<?php echo base_url();>materialize/img/banner1.jpg"> 
    </div> 
</div> 

Ecco, jsfiddle

2

tenta di impostare lo stile di larghezza al 100% direttamente ai div esempio

<div style="width:100%" class="parallax-container"> 
     <div style="width:100%" class="parallax"><img style="width=100%" src="<?php echo base_url();?>materialize/img/banner1.jpg"></div> 
</div> 
+0

ho provato, ancora lo stesso risultato che sto avendo. – user827391012

+0

Ho modificato l'errore. Sono contento che tu abbia ricevuto la risposta @ user36036724 –

0

Si dovrebbe fare la vostra immagine reattivo con un class = "reattivo-img"

<img class="responsive-img" alt="parallax" src={img} /> 
0

float: right viene applicato alla forma invece di input-campo .

<form class="right hide-on-med-and-down"> 
<div class="input-field"> 

Cambiare questo per

<form class="hide-on-med-and-down"> 
<div class="input-field right"> 

Materialize Css Parallax Codepen

Problemi correlati