视差图像不会填充宽度 - 实现

时间:2016-02-22 18:27:01

标签: html css materialize

我有这个问题,图片停留在左边,我已经在我的js中初始化它,我尝试改变图片的大小,使用不同的浏览器,它有相同的结果。有人可以帮我解决这个问题吗?

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>

结果

enter image description here

4 个答案:

答案 0 :(得分:1)

尝试直接在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>

答案 1 :(得分:1)

试一试。在Krushio Vida的回答中,宽度属性之后的错误是等号。

f <- function(x) {
    oo <- options(scipen = -100)
    on.exit(options(oo))
    print(x)
}

## Try it out
1111
## [1] 1111
f(1111)
## [1] 1.111e+03
1111
## [1] 1111

这是jsfiddle

答案 2 :(得分:0)

你应该使用一个类=&#34; responsive-img&#34;

来使你的图像响应
<img class="responsive-img"  alt="parallax" src={img} />

答案 3 :(得分:0)

float:right应用于表单而不是input-field。

 <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