Jssor полностью помещает изображение в div

#jquery #css #jssor

#jquery #css #jssor

Вопрос:

Мне сложно изменить CSS / настройки с помощью Jquery, чтобы изображения полностью соответствовали div, что я должен сделать, чтобы любое изображение идеально вписывалось в div?

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

Я попытался выполнить следующее:

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

Но это еще больше сломало слайдер.

Я буду вставлять jsfiddle, чтобы вы могли лучше понять весь код, вот его предварительный просмотр.

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

Ответ №1:

Классическое старое решение — сделать изображение фоном div

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

Комментарии:

1. Похоже, это не работает с текущим слайдером, поскольку я не могу манипулировать html, чтобы разрешить это, я не думаю. поскольку он имеет встроенный div для изображений. Есть ли альтернативы с использованием CSS для изменения текущих divs?