Jssor fully fit the image within div

Question

I have a hard time changing CSS / Settings via Jquery to make images fully fit the div, what should I do to make any picture fit perfectly in the div?

https://jsfiddle.net/teonxyku/1/

I tried following:

#slider1_container img {
    max-width:100%;
    max-height:100%;
}

But it further broke the slider.

I will be pasting jsfiddle so you can get better understanding of the whole code, here's a preview of it.

http://fiddle.jshell.net/teonxyku/1/show/light/

Answer 1

Classic old solution is to make the image the background of the div

#slider1_container {
  width: 200px;
  height: 160px;
  background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
  background-size: cover;
  background-repeat: no-repeat;
}

<div id="slider1_container"></div>