In order for the images to auto fit to slider containers use width 100% on . Check CSS below
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
<div id="owl-demo" class="owl-carousel owl-theme"> <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div> <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div> <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div> </div>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}