Slider with fixed height?

Question

css

Hello!
I'm not looking for a ready made slider, I'm looking for a solution to a problem. And the problem is that all the fresh and popular sliders that I've seen have a problem - they stretch vertically if there is a vertical photo in it. The question is how to make the height fixed and all the photos were the same height? Photos are stuck through img.

I saw one amazing example of a slider, but there the image is inserted through background-image and the size is background-size: contain. Works as it should. But I need img.

Thank you.

Answer 1

1. Why on img?
2. If on Img, then limit the height or clip it with overflow: hidden

Answer 2

html

<div id="slider-box">
    <div class="slider-container" id="slider-container">
        <div class="slider">
            <div class="slide"><img src="{THEME}/imag/slider/1.png" alt="5"></div>
            <div class="slide"><img src="{THEME}/imag/slider/2.png" alt="5"></div>
            <div class="slide"><img src="{THEME}/imag/slider/3.png" alt="5"></div>
            <div class="slide"><img src="{THEME}/imag/slider/4.png" alt="5"></div>
            <div class="slide"><img src="{THEME}/imag/slider/5.png" alt="5"></div>
        </div>

        <div class="switch" id="prev"><span title="Назад"></span></div>
        <div class="switch" id="next"><span title="Далее"></span></div>
    </div>
</div>

js

(function($){$.fn.sliderUi=function(options){var settings=$.extend({autoPlay:true,delay:3500,responsive:true,controlShow:true,arrowsShow:true,caption:false,speed:300,cssEasing:'ease-out'},options||{});function supportCSS3(prop){var prefix=['-webkit-','-moz-',''];var root=document.documentElement;function camelCase(str){return str.replace(/\-([a-z])/gi,function(match,$1){return $1.toUpperCase();})}
for(var i=prefix.length-1;i>=0;i--){var css3prop=camelCase(prefix[i]+prop);if(css3prop in root.style){return css3prop;}}
return false;}
function transitionEnd(){var transitions={'transition':'transitionend','WebkitTransition':'webkitTransitionEnd','MozTransition':'mozTransitionEnd'}
var root=document.documentElement;for(var name in transitions){if(root.style[name]!==undefined){return transitions[name];}}
return false;}
function support3d(){if(!window.getComputedStyle){return false;}
var el=document.createElement('div'),has3d,transform=supportCSS3('transform');document.body.insertBefore(el,null);el.style[transform]='translate3d(1px,1px,1px)';has3d=getComputedStyle(el)[transform];document.body.removeChild(el);return(has3d!==undefined&&has3d.length>0&&has3d!=="none");}
var transformProperty=supportCSS3('transform');var transitionProperty=supportCSS3('transition');var has3d=support3d();return this.each(function(){var
container=$(this),slider=container.find('.slider'),sliderStyle=slider.get(0).style,arrows=container.find('.switch'),caption=slider.find('.caption'),slide=slider.find('.slide'),slideLen=slide.length,slideWidth=container.outerWidth(),sliderWidth=slideLen*slideWidth,controlPanel=null,current=0,offset=null,busy=false,timer=null;sliderStyle['width']=sliderWidth+'px';slide.css('width',slideWidth);if(settings.responsive){$(window).on('resize',function(){if(transitionProperty){sliderStyle[transitionProperty]='none';}
busy=false;slideWidth=container.outerWidth();sliderWidth=slideLen*slideWidth;slide.css('width',slideWidth);if(transitionProperty&&transformProperty){sliderStyle['width']=sliderWidth+'px';(has3d)?sliderStyle[transformProperty]='translate3d('+ -(slideWidth*current)+'px, 0, 0)':sliderStyle[transformProperty]='translate('+ -(slideWidth*current)+'px, 0)';}else{slider.css({width:sliderWidth+'px','margin-left':-(slideWidth*current)+'px'});}})}!settings.caption&&caption.remove();if(settings.controlShow){controlPanel=$('<div/>',{'class':'slider-nav'}).appendTo(container);var links=[];for(var i=0;slideLen>i;i++){var act=(current===i)?'active':'';links.push('<a class="'+act+'" data-id="'+i+'"></a>');}
controlPanel.get(0).innerHTML=links.join('');var navControl=controlPanel.find('a');navControl.on('click',function(e){e.preventDefault();if($(this).hasClass('active'))return;current=parseInt(this.getAttribute('data-id'),10);show('current');})}
var show=function(side){if(busy)return;if(side==='next'){if(current<slideLen-1){offset=-(slideWidth*(++current))+'px';}else{offset=0;current=0;}}else if(side==='current'){offset=-(slideWidth*current)+'px';}else{if(current>0){offset=-(slideWidth*(--current))+'px';}else{offset=-(slideWidth*(slideLen-1))+'px';current=slideLen-1;}}
if(settings.controlShow){navControl.removeClass('active');navControl.eq(current).addClass('active');}
busy=true;if(transitionProperty&&transformProperty){sliderStyle[transitionProperty]=transformProperty+' '+settings.speed+'ms '+settings.cssEasing;(has3d)?sliderStyle[transformProperty]='translate3d('+offset+', 0, 0)':sliderStyle[transformProperty]='translate('+offset+', 0)';slider.one(transitionEnd(),function(e){busy=false;})}else{slider.animate({'margin-left':offset},settings.speed,'linear',function(){busy=false;})}}
if(settings.arrowsShow){arrows.on('click',function(e){e.preventDefault();var side=this.id;show(side);})}else{arrows.remove();}
var auto=function(){if(timer)clearInterval(timer);timer=setInterval(function(){show('next');},settings.delay);}
if(settings.autoPlay){auto();container.hover(function(){clearInterval(timer);},function(){auto();});}});}})(jQuery);$("#slider-container").sliderUi({speed:500,cssEasing:"cubic-bezier(0.285, 1.015, 0.165, 1.000)"});$("#caption-slide").sliderUi({caption:true});

css

.slider-container{position:relative;overflow:hidden;width:100%;margin:0 auto}.slider{position:relative;width:9999px}.slider:before,.slider:after{display:table;content:' '}.slider:after{clear:both}.slider .slide{position:relative;float:left;margin:0;padding:0}.slider .slide img{display:block;width:100%;max-width:100%;height:375px}#slider-box{border:1px solid #3F3F3F;border-radius:2px}.act,#prev > span,#next > span,#slider-nav > a{background:url(../imag/arrows.png) no-repeat}#next > span,#prev > span{display:block;width:16px;height:24px}#next > span{background-position:-20px 0}#prev > span{background-position:0 0}#next,#prev{position:absolute;top:50%;margin-top:-20px;padding:10px 12px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:50%;background:#323232;opacity:.9;filter:alpha(opacity=90)}#prev{left:10px}#next{right:10px}.caption{position:absolute;bottom:0;display:block;width:100%;padding:0 10px 30px;color:#fff;background:rgba(0, 0, 0, .8);background:-webkit-linear-gradient(bottom, rgba(0, 0, 0, .8), transparent 100%);background:linear-gradient(to top, rgba(0, 0, 0, .8), transparent 100%);filter:progid: DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#99000000', endColorstr='#99000000')}.caption a{display:block;color:#fff}.slider-nav{line-height:30px;position:absolute;bottom:0;left:0;width:100%;height:30px;margin:0;padding:0;text-align:center;background:#323232;opacity:.9;filter:alpha(opacity=90)}.slider-nav a{display:inline-block;width:12px;height:12px;margin:8px 3px;-webkit-transition:background .5s ease;-moz-transition:background .5s ease;-o-transition:background .5s ease;transition:background .5s ease;opacity:.6;border:2px solid #3F3F3F;border-radius:50%;background:transparent;filter:alpha(opacity=90)}.slider-nav .active{width:12px;height:12px;opacity:1.0;background:#999;filter:alpha(opacity=100)}@media (max-width: 580px){.caption{display:none}}