[英]Parallax Image doesn't fill the width - 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>
结果
尝试直接在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>
试试吧。 在Krushio Vida的回答中,在宽度属性之后,错误是等号。
<div style="width:100%;" class="parallax-container">
<div class="parallax">
<img src="<?php echo base_url();>materialize/img/banner1.jpg">
</div>
</div>
这是, jsfiddle
您应该使用class =“responsive-img”使图像响应
<img class="responsive-img" alt="parallax" src={img} />
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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.