Как исправить изображения на гибком слайдере, чтобы они были отзывчивыми?

Итак, у меня есть HTML-шаблон, который я купил в Интернете. Я отредактировал его и сделал веб-сайт таким, каким хочу, однако у меня возникла проблема с FlexSlider.

На мобильном устройстве изображения («слайды») отображаются примерно вдвое меньше их реального размера. Если я перейду на настольную версию, изображение слайдера загрузится нормально.

На компьютере все нормально.

Есть ли реальный способ правильно изменить размер изображения на мобильном устройстве?

Сайт: https://timetakernet.info/luxehotel/.

Приношу свои извинения, если это повторяющийся вопрос, но я не смог найти рабочего решения.


html css flexslider
person Mad Wolf    schedule 25.02.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что вы ищете правило @media css. Вот определение из https://developer.mozilla.org/en-US/docs/Web/CSS/@media:

Ат-правило @media CSS можно использовать для применения части таблицы стилей на основе результата одного или нескольких медиа-запросов. С его помощью вы указываете медиа-запрос и блок CSS для применения к документу тогда и только тогда, когда медиа-запрос соответствует устройству, на котором используется контент.

person bitznbytez    schedule 25.02.2020
comment
Вы хотите предоставить код? Я как бы озадачен тем, что мне делать. - person Mad Wolf; 26.02.2020

arrow_upward
0
arrow_downward

Используйте этот код, чтобы адаптировать гибкий слайдер

(function() {
 
  // store the slider in a local variable
  var $window = $(window),
      flexslider = { vars:{} };
 
  // tiny helper function to add breakpoints
  function getGridSize() {
    return (window.innerWidth < 600) ? 2 :
           (window.innerWidth < 900) ? 3 : 4;
  }
 
  $(function() {
    SyntaxHighlighter.all();
  });
 
  $window.load(function() {
    $('.flexslider').flexslider({
      animation: "slide",
      animationLoop: false,
      itemWidth: 210,
      itemMargin: 5,
      minItems: getGridSize(), // use function to pull in initial value
      maxItems: getGridSize() // use function to pull in initial value
    });
  });
 
  // check grid size on resize event
  $window.resize(function() {
    var gridSize = getGridSize();
 
    flexslider.vars.minItems = gridSize;
    flexslider.vars.maxItems = gridSize;
  });
}());

в противном случае вы можете посетить этот сайт нажмите здесь

person Md Tofajjal Hossen    schedule 25.02.2020
comment
Пытался загрузить дополнительный Javascript с помощью этого кода, но оказался на сайте, который не загружается (отображался только загрузчик). - person Mad Wolf; 26.02.2020