In my JS image slider (Owl-Carousel), images have different dimensions:
http://goo.gl/KmpX2P
You can see that the image height varies within the carousel. How to make it constant while keeping carousel responsive? I need images to fill the slider space at all times, therefore some will have to be cropped through CSS somehow. The desired result looks like this:
It can be specified in css.
Example,
http://jsfiddle.net/AwBLL/2/
.owl-carousel .owl-item{
height:285px;
width:100%;
}
EDIT
The following solution uses the plugin's callback events to modify the viewport's/wrapper's height according to the smallest image height.
http://jsfiddle.net/DNMpF/1/
js
$(document).ready(function () {
$("#owl-example").owlCarousel({
afterUpdate: function () {
updateSize();
},
afterInit:function(){
updateSize();
}
});
function updateSize(){
var minHeight=parseInt($('.owl-item').eq(0).css('height'));
$('.owl-item').each(function () {
var thisHeight = parseInt($(this).css('height'));
minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
});
$('.owl-wrapper-outer').css('height',minHeight+'px');
}
});
css
.owl-carousel .owl-item img {
height:auto;
width:100%;
display: block;
}
.owl-carousel .item {
margin:0px;
}
EDIT2
Regarding the latest comment, to show the bottom part of the large images one approach could be to iterate the images and add a negative top margin equal to the part of these images hidden.
function updateSize(){
var minHeight=parseInt($('.owl-item').eq(0).css('height'));
$('.owl-item').each(function () {
var thisHeight = parseInt($(this).css('height'));
minHeight=(minHeight<=thisHeight?minHeight:thisHeight);
});
$('.owl-wrapper-outer').css('height',minHeight+'px');
/*show the bottom part of the cropped images*/
$('.owl-carousel .owl-item img').each(function(){
var thisHeight = parseInt($(this).css('height'));
if(thisHeight>minHeight){
$(this).css('margin-top',-1*(thisHeight-minHeight)+'px');
}
});
}
Slides with random height at http://jsfiddle.net/AwBLL/108/
HTML:
<h2>Vertical align</h2>
<div class="owl-carousel bg-contain">
<img src="http://lorempixel.com/234/100/technics/1/" />
<img src="http://lorempixel.com/234/400/technics/2/" />
<img src="http://lorempixel.com/234/200/technics/9/" />
<img src="http://lorempixel.com/234/150/technics/10/" />
</div>
<h2>Full Zoom small images</h2>
<div class="owl-carousel bg-cover">
<img src="http://lorempixel.com/234/100/technics/1/" />
<img src="http://lorempixel.com/234/400/technics/2/" />
<img src="http://lorempixel.com/234/200/technics/9/" />
<img src="http://lorempixel.com/234/150/technics/10/" />
</div>
CSS:
.owl-wrapper-outer {
border: 1px solid red;
font: 0/0 a;
line-height: 0;
}
.owl-carousel .owl-item {
background-position: 50% 50%;
background-repeat: no-repeat;
}
.bg-contain .owl-item { background-size: contain }
.bg-cover .owl-item { background-size: cover }
.owl-carousel .owl-item img {
height: auto;
width: 100%;
visibility: hidden;
}
JS:
$(".owl-carousel").each(function () {
var $this = $(this);
$this.owlCarousel({
afterUpdate: function () {
updateSize($this);
},
afterInit: function () {
updateSize($this);
}
});
});
function updateSize($carousel) {
var maxHeight = 0;
$('.owl-item', $carousel).each(function () {
var $this = $(this);
var $image = $this.find('img');
//Max height
var prevHeight = $this.height();
var thisHeight = $this.height('auto').height();
$this.height(prevHeight);
maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);
//Set image as background
var imageSource = $image.attr('src');
$this.css('backgroundImage', 'url(' + imageSource + ')');
});
//Set equal height
$('.owl-item', $carousel).height(maxHeight);
}
if you are using div with background image in your carsoual
You can try controlling the size of the background by using the background-size
property.
#header {
-webkit-background-size:100%;
-moz-background-size:100%;
background-size:100%;
background-position: 0% 0%;
background: url(http://i47.tinypic.com/2090r3c.jpg) no-repeat;
}
Or else if you use then you can useauto resize
according to container width
img {
height: inherit;
max-height: 100%;
}
Wish you'd put up a fiddle, but off the top of my Notepad++ you could try putting this at the bottom of your page and see if that works out for you.
<script>
$(document).on('resize', function(e){
var OIs = $('.owl-item')
minHeight = 0;
//reset overflow
OIs.css('overflow', 'visible');
//cycle through items and add height to array
for (i==0;i<OIs.length;i++){
var thisHeight = OIs[i].innerHeight;
if (thisHeight != undefined && thisHeight != null && thisHeight > 0){
if (minHeight == 0 ){
minHeight = thisHeight;
} else if (thisHeight < minHeight){
minHeight = thisHeight;
}
}
}
//resize containers to smallest height
OIs.css({'overflow':'hidden', 'height': minHeight + 'px'}
});
</script>
if it works there are better ways to write this but it'll give you the start of a solution
My images are loaded dynamically, which mean image name could changes from time to time, how could keep as a background image and pass the proper image name into css file?
You can achieve equal height using flexbox.
Try this:
.owl-stage
display flex
.owl-item
flex 0 0 auto