Have images center the width and height using owl carousel and Bootstrap 3

Question

I am trying to achieve a responsive image gallery browsing experience using a combination of bootstrap and owl carousel. I have a fixed header with a fixed height and a fixed footer with a fixed height.

My goal here is to have the images in the slider always end up in the center of the header of footer despite the height of the image. is there a simple way to make some type of dynamic container inbetween the footer and header to accomplish this or maybe some nifty java script to resize the images? (Keeping in mind the solution needs to work on mobile as well)

Here is my jsfiddle example http://jsfiddle.net/Tenacity/GMu2x/

My mind is thinking of something similar to this

.img .owl-carousel {
 width:xx%;
 height:xx%;
 margin-top:xx%;
 margin-bottom:xx%;
 margin-left:xx%;
 margin-right:xx%;
 }

And im thinking the xx's are dynamically caluclated based on screen height and width

If you look at my example i am currently just using a margin-top css attribute to have the images all scroll left to right about 60px from the top which i would of course remove with a better solution from the top but i want to achieve a dead center image all the time when they are viewed.

Thanks in advance

Answer 1

 .owl-carousel .owl-item{ height:550px; width:1200px; } .owl-carousel .owl-item img { height:550px; width:auto; } .bg-holder{ text-align: center; } 

 <div class="owl-carousel owl-slider" id="owl-carousel-slider" data-inner-pagination="true" data-white-pagination="true"> <div class="bg-holder"> <!-- your content images goes here --> </div> </div>