CODEWITHSUNDEEP
csshtmltwitter-bootstrap
anekin
anekin

Reputation: 31

Bootstrap carousel: How can I use different-size images for different screen resolutions?

For performance reasons, I want to use large-size images for desktop and smaller-size ones for mobile devices as my carousel slides.

I tried below code with only limited success:

<picture>
   <source srcset="images/s2.jpg" media="(min-width: 768px)">
   <source srcset="images/s2m.jpg">
   <img class="second-slide" srcset="images/s2m.jpg" alt="2">
</picture>

Where s2m.jpg is the default (small) image and s2.jpg is the larger one.

The carousel works and selects the correct image depending on the screen size, but loses original responsiveness. That is, slides are not resized to the width of the parent element (.item). Instead, they are just cropped.

What is the proper way of achieving this?

Upvotes: 3

Views: 3541

Answers (4)

Dejan Dozet
Dejan Dozet

Reputation: 1019

I did it like this:

<div class="carousel slide d-none d-sm-block" data-ride="carousel" data-interval="4000" data-pause="hover">
  <div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
    <div class="carousel-item active" style="cursor: default;">
      <img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/autoskola.jpg" alt="" src="/images/carousel/autoskola.jpg">
      <div class="carousel-caption">
        <p class="welcome_message"></p>
        <p class="slogan"></p>
      </div>
    </div>
  </div>
</div>
<div class="carousel slide d-block d-sm-none" data-ride="carousel" data-interval="4000" data-pause="hover">
  <div data-aos="fade-down" data-aos-duration="1000" class="carousel-inner aos-init aos-animate">
    <div class="carousel-item active" style="cursor: default;">
      <img data-delayed="1" data-href="" class="img_slider d-block img-fluid w-auto" lsrc="/images/carousel/baner-mobilni.jpg" alt="" src="/images/carousel/baner-mobilni.jpg">
      <div class="carousel-caption">
        <p class="welcome_message"></p>
        <p class="slogan"></p>
      </div>
    </div>
  </div>
</div>

so with d-none d-sm-block and d-block d-sm-none will hide / show carousel for certain screen sizes and with lsrc I will disable loading images, note that I will rename it back to src with javascript.

Upvotes: 0

vaha
vaha

Reputation: 309

Just create a css class and use it as follow:

.fitImage {
    width: 100%;
    box-sizing:border-box;
}

<picture>
    <source srcset="images/s2.jpg" media="(min-width: 768px)">
    <source srcset="images/s2m.jpg">
    <img class="fitImage second-slide" srcset="images/s2m.jpg" alt="2">
</picture>

Upvotes: 0

user7171872
user7171872

Reputation:

In my opinion the problem can be solved with the HiSRC Framework - https://github.com/teleject/hisrc. You can then use the attributes data-1x or data-2x in the -Tag to define the different sized image sources in it:

For example:

<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>

and insert the following jQuery Code in your Script to "activate" the HiSRC-Framework and give the Element around the pictures the class "hisrc":

    $(document).ready(function(){
  $(".hisrc img").hisrc();
  $(".hisrc img+img").hisrc({
    useTransparentGif: true,
    speedTestUri: '50K.jpg'
  });
})

<div class="hisrc">
   <img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png"/>
</div>

Hopefully it is helpful for you ;)

Upvotes: 1

Shiva
Shiva

Reputation: 12592

Actually, when you resize the window, the carousel is not supposed to decrease in height to cope with the changing width. This will distort the view of the page. It's the feature of bootstrap carousel to do so.

Regarding responsiveness, when you load the page in small devices (I mean no resizing in desktop browser) you will see the relevant slide image is only loaded anyway. I think this should work for you.

However, if you require to resize the images in height when width decreases, you can achieve using CSS

img{
  width: 100%;
}

See this codepen for information.

Note: You might not want to impose the style to all <img>, so use wisely

Upvotes: 0

Related Questions