如何在flexslider上固定图像以做出响应？

Question

所以我有一个HTML模板，我离开了互联网。我已经按照我希望的方式对其进行了编辑并创建了一个网站，但是FlexSlider遇到了问题。

在移动设备上，图像（“幻灯片”）以实际尺寸的一半显示。如果我切换到桌面版本，则滑块图像会很好地加载。

在计算机上，看起来还可以。

是否有任何真正的方法可以使图像在移动设备上正确调整大小？

站点是：https://timetakernet.info/luxehotel/。

我很抱歉，如果它是一个重复的问题，但是我找不到有效的解决方案。

Answer 1

@ media CSS规则可用于应用样式表的一部分基于一个或多个媒体查询的结果。使用它，您可以指定媒体查询和CSS块（仅当且仅当其适用时）如果媒体查询与正在显示内容的设备匹配使用。

Answer 2

(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;
  });
}());

否则，您可以访问此站点click here