視差画像が幅を埋める - マテリアライズ

Question

画像が左にある場合、私はすでにjで初期化していますが、画像のサイズを変更しようとしました。異なるブラウザを使用しましたが、それは同じ結果を持っています。誰かが私を助けてこれを解決できますか？

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> 

結果

Answer 1

これを試してください。 Krushio Vidaの答えでは、の幅の後に間違いがありました。右のフォームの代わりに、入力フィールドに適用されます。ここでは

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

はフロート

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

Answer 2

は、例えばdivタグで直接100％に幅のスタイルを設定するようにしてください

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

Answer 3

です。

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

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

Materialize Css Parallax Codepen

Answer 4

あなたは=「応答-IMG」クラスを使用して画像が応答するべき、jsfiddle