bxSlider自适应设计-调整图像大小

问题描述

使用bxSlider，是否可以根据设备显示图像的不同部分？

例如，在桌面上显示此内容：

并在移动设备上显示：

从设计角度来看，此图像大小调整是有意义的，因为如果要在移动设备上使用台式机版本，并保持宽度和高度比例并将宽度保持为100％（如默认设置那样），则图像高度变得太小。提前谢谢。

  <ul class="slider" style="padding:0px !important;">

    <li><img src="img/image1.png">
    <div class="caption1"><p>image1</p></div>
    </li>

    <li> <img src="img/image2.png">
    <div class="caption2"><p> image2 </p> </div>
    <div class="caption3">caption </div>
    </li>

  <li><img src="img/image3.png">
    <div class="caption1"><p>image3</p></div>
    </li>

 </ul>

解决方法

答案是可以的。 您可以将具有不同属性的css用于不同的屏幕。 在此链接中了解有关此内容的更多信息：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

然后，您可以使用对象拟合来适合较短容器的图像： https://www.w3schools.com/css/css3_object-fit.asp