Adding tag Carousel Bootstrap

I've first used carousel images in css as background style. But, for mobile/tablet screens I've had to use them inside HTML:

<div class="carousel-inner">
     <div class="item" id="slide3">                                         
        <a href="http://ift.tt/1E1Pcbl" target="_blank">
             <img src="/images/eko_l.jpg" style="height: 100%;" />
        </a> 
      <div class="carousel-caption">
      <h4></h4>
      <p></p>
      </div><!-- end carousel-caption-->                  
      </div><!-- end item -->
 </div><!-- carousel-inner -->

Now, problem is; only half of the images can be displayed. My CSS about the issue:

/* tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .item {
        height: auto;
    }
    .item > img {
        width: 100%;
    }
}
/* laptops */
@media (max-width: 1023px) and (min-width: 992px) {
    .item {
         height: 200px;
    }
    .item > img {
        width: 100%;
    }
}
/* desktops */
@media (min-width: 1024px) {
    .item {
        height: 300px;
    }
    .item > img {
        width: 100%;
    }
}

In background attribute the top center no-repat is not working for %100 view. Any idea is appreciated, thanks...