Search code examples
htmlcssresponsive-designsliderbxslider

bxSlider Responsive Design - Adjusting Image Size

With bxSlider, is it possible to show different parts of images depending on device?

For example, show this on Desktop:

enter image description here

And show this on Mobile:

enter image description here

This image-sizing makes sense from a design perspective because if you were to feature the desktop version on mobile and keep the width and height proportion and keep the width at 100% (as how it's done in the default setting), the image height becomes just too small. Thx in advance.

  <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>
Solution

  • The answer is yes, you can. You can use css with different attributes for different screens. Read more about it in this link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    Then, you can use object-fit to fit the image for a shorter container: https://www.w3schools.com/css/css3_object-fit.asp