Display Carousel as half image slider - iphone

Question

i want to display carousel as half image slider instead of full page slider.
CSS:
html,
body {
height: 40%;
margin: auto;
}
header.carousel {
height: 40%;
margin:auto;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 40%;
margin:auto;
}
header.carousel .fill {
width: 100%;
height: 40%;
background-size:cover ;
margin: auto;
}
HTML:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--first slide-->
<div class="item active">
<img src="image/stylegirl.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Text Test</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
<!--second slide-->
<div class="item">
<img src="image/couple.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button">Test Button</a></p>
</div>
</div>
</div>
<!--Third Slide-->
<div class="item">
<img src="image/w1.jpg" style="Width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
jsfiddle
Image is missing from the fiddle coz i don't know how to add image from the local file.
It shows half slider image only when i use height in px instead of %.
But still it is showing as full page slider carousel. Why is that.
Any help.