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。 在此鏈接中閱讀更多相關信息： https : //www.w3schools.com/cssref/css3_pr_mediaquery.asp

然后，您可以使用 object-fit 來適應較短容器的圖像： https : //www.w3schools.com/css/css3_object-fit.asp