Make HTML Div responsive using Bootstrap

I wrote the following code to animate the pictures inside the panel.

This code is working fine.

But it is not responsive. Please guide me how to make it responsive?

<div class="col-sm-8">
   <div id="dvImage" style="background-repeat:no-repeat;height: 500px;">
   </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var images = ["a-mins.jpg", "b-mins.jpg", "c-mins.jpg", "d-mins.jpg", "e-mins.jpg", "f-mins.jpg", "g-mins.jpg", "h-mins.jpeg", "i-mins.jpg", "j-mins.jpg", "k-mins.jpg", "l-mins.jpg"];
        //var images = ["a-min.jpeg", "b-min.jpeg", "c-min.jpeg", "d-min.jpeg", "e-min.jpeg", "f-min.jpeg"];
        $(function () {
            var i = 0;
            $("#dvImage").css("background-image", "url(images/" + images[i] + ")");
            setInterval(function () {
                i++;
                if (i == images.length) {
                    i = 0;
                }
                $("#dvImage").fadeOut("slow", function () {
                    $(this).css("background-image", "url(images/" + images[i] + ")");
                    $(this).fadeIn("slow");
                });
            }, 5000);
        });
    </script>