Как сделать изображения в слайд-шоу адаптивными? - PullRequest
Новая
       46

Как сделать изображения в слайд-шоу адаптивными?

0 голосов
/ 12 февраля 2020

Контекст: я подключил крошечный слайдер. js к моему сайту. Я использую его, потому что он поддерживает функцию «Переменная ширина».

Моя проблема заключается в следующем: созданный мной слайдер не может обрезать изображения (необходимо «содержать», а не «покрывать») Вот почему я использую функцию переменной ширины. Но я хочу, чтобы все изображения на слайдере имели одинаковую высоту. Изображения являются как портретными, так и пейзажными. Когда я изменяю размер окна / ползунка, изображения ландшафта начинают меняться в первую очередь перед портретными изображениями, создавая странный вид ползунка различной высоты. Как сделать так, чтобы все изображения имели одинаковую высоту, даже при изменении размера? Я просто хочу, чтобы портретные изображения начинали изменять размеры, когда это делают ландшафтные.

Моей первой мыслью было просто сделать так, чтобы изображения имели ширину: авто и высоту: [x] vh, однако пока это решает мою переменную высоту проблема, это заставляет мои изображения искажаться и squi sh вместе при изменении размера окна. Я просто не могу сохранить одинаковую высоту для всех изображений, сохраняя правильное соотношение изображений.

Единственный код, который у меня сейчас есть (это не часть крошечного слайдера. css) это всего лишь варианты: 

var slider = tns({
  container: '.my-class',
  items: 1,
  slideBy: '1',
  autoplay: true,
  autoWidth: true,
});

Спасибо!

РЕДАКТИРОВАТЬ - ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ: Я должен упомянуть, что я подключил это к пользовательской теме WordPress, где изображения внутри меняются пользователем. Так что я никак не смогу настроить таргетинг на определенные c изображения, поскольку изображения могут измениться в любое время и могут быть размещены в любом порядке.

...