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,
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;
}