Как сделать, чтобы слайдер подстраивался под размер фото?

/* Basic jQuery Slider essential styles */
.b-slider-detal ul.bjqs {
position:relative;
list-style:none;
padding:0;
margin:0;
overflow:hidden;
display:none;
}
 
.b-slider-detal li.bjqs-slide {
position:absolute;
display:none;
}
 
.b-slider-detal ul.bjqs-controls {
list-style:none;
margin:0;
padding:0;
z-index:9999;
}
 
.b-slider-detal ul.bjqs-controls li a {
position:absolute;
text-indent: -9999px;
bottom: -41px;
}
 
.b-slider-detal ul.bjqs-controls li.bjqs-next a {
left:50px;
background: url(../img/slide-next.png) 0 0;
}
 
.b-slider-detal ul.bjqs-controls li.bjqs-prev a {
left:10px;
background: url(../img/slide-prev.png) 0 0;
}
.b-slider-detal ul.bjqs-controls li a:hover {
    background-position: 37px 0;
}
.b-slider-detal ol.bjqs-markers {
list-style:none;
padding:15px 0 15px 110px;
margin:0;
background: #f5c000;
}
 
.b-slider-detal ol.bjqs-markers.h-centered {
text-align:center;
}
 
.b-slider-detal ol.bjqs-markers li {
display:inline;
}
 
.b-slider-detal ol.bjqs-markers li a {
display:inline-block;
}
 
.b-slider-detal p.bjqs-caption {
display:block;
width:96%;
margin:0;
padding:2%;
position:absolute;
bottom:0;
}
 
.b-slider-detal #container {
max-width:620px;
margin:0 auto;
padding-bottom:80px;
}
 
.b-slider-detal #banner-fade2,.b-slider-detal #banner-slide {
margin: 20px auto 70px;
}
 
.b-slider-detal ul.bjqs-controls li a {
width: 37px;
height: 37px;
display:block;
text-decoration:none;
}
 
.b-slider-detal ul.bjqs-controls li a:hover {
}
 
.b-slider-detal ol.bjqs-markers li a {
width: 15px;
height: 15px;
margin-right: 5px;
background: url(../img/slide-mar.png) 50% 50% no-repeat;
text-decoration:none;
position: relative;
text-indent: -9999px;
}
 
.b-slider-detal ol.bjqs-markers li.active-marker a,ol.bjqs-markers li a:hover {
    background-image: url(../img/slide-mar-on.png);
}
 
.b-slider-detal p.bjqs-caption {
background:rgba(255,255,255,0.5);
}