简体   繁体   中英

Parallax Image doesn't fill the width - Materialize

I'm having this problem where the picture stays to the left, I've already initialized it in my js, I tried changing the size of the picture, used different browsers, and it has the same result. Can somebody help me in solving this?

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>

Result

在此输入图像描述

Try to set width style to 100% directly at the divs eg

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

Try this out. Mistake was equal sign after width property in Krushio Vida's answer.

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

Here is, jsfiddle

您应该使用class =“responsive-img”使图像响应

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

float:right is applied to the form instead of input-field.

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

Change this to

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

Materialize Css Parallax Codepen

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM