我在html代码中放置了一张图片幻灯片，但是上传时只有四分之一的图片显示。有人可以帮忙找出问题所在吗？
<header style="background-image: url();">
<div id="slider">
<div class="bx-wrapper" style="max-width: 100%; margin: 0px
auto; ">
<div class="bx-viewport" style="width: 100%; overflow:
hidden; position: relative; height: 327px;">
<div class="slides" style="width: auto; position:
relative;">
<div class="item-493" style="float: left;
width:100%; list-style: none; position: absolute; z-index:1; display:
block;">
<img src="electrical-material.jpg">
<div class="container">
<div class="slide-text">
<h2>View our products</h2>
<h5>Quality products at affordable
prices</h5>
<h4 class="cc_cap">Electrical
Materials Distribution</h4><a href="products.html" class="btn btn-
info">Click here</a>
</div>
</div>
</div>
<div class="item-487" style="float: left;
width:100%; list-style: none; position: absolute; z-index: 2; display:
block;">
<img src="electrical-contractor.jpg">
<div class="container">
<div class="slide-text">
<h2>View our products</h2>
<h5>Quality products at affordable
prices</h5>
<h4 class="cc_cap">Electrical
Contractor</h4><a href="products.html" class="btn btn-info">Click
here</a>
</div>
</div>
</div>
<div class="item-485" style="float: left;
width:100%; list-style: none; position: absolute; z-index:3; display:
block;">
<img src="energy-audit.jpg">
<div class="container">
<div class="slide-text">
<h2>View our products</h2>
<h5>Quality product for reasonable
prices</h5>
<h4 class="cc_cap">Energy Audit</h4><a
href="products.html" class="btn btn-info">Click here</a>
</div>
</div>
</div>
<div class="item-482" style="float: left; width:100%; list-style:
none; position: absolute; z-index: 4; display: block;">
<img src="consultandprojectmanagement.jpg">
<div class="container">
<div class="slide-text">
<h2>View our products</h2>
<h5>Quality products for affordable prices.</h5>
<h4 class="cc_cap">Consult & Project Management</h4>
<a href="products.html" class="btn btn-info">Click here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
