How to fill a div with a class col-md-8 in bootstrap and jssor? - twitter-bootstrap-3

Question

I want that the images container in the jssor component fill the div with a class col-md-8. I tried delete width and height, change the position attribute, doesn't work with percent nor auto attributes, most of the time the image disappear. Is there a way to do this??
<div class="col-md-8">
<div id="slider1_container" class="" style="position: relative; top: 0px; left: 0px; width: 650px; height: 350px;">
<!-- Slides Container -->
<div data-u="slides" class="" style="cursor: move; position: relative; overflow: hidden; left: 0px; top: 0px; width: 650px; height: 350px;">
#foreach (var image in Model.RandomAlbum.Images)
{
<div><img src="~/Content/uploads/original/#image.Name" data-u="image" class="img-responsive" /></div>
}
</div>
</div>
</div>

Answer 1

Jssor slider is specified with fixed size, but you can scale it to any size by calling api $ScaleWidth.
Use the following code, you can fit the slider in parent container.
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
Reference: http://www.jssor.com/development/tip-make-responsive-slider.html