bxSlider 响应式设计——调整图片大小

Question

使用 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>

Answer 1

答案是肯定的，你可以。您可以针对不同的屏幕使用具有不同属性的 css。在 link 中阅读更多相关信息：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

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

bxSlider 响应式设计——调整图片大小

bxSlider Responsive Design - Adjusting Image Size

html

css

slider

responsive-design

bxslider