2

I am trying to work with srcset in a combination of container-fluid from Bootstrap.

I know, there is something wrong but I cannot figure out what it is! I am trying to use calc because I don't have the exact number for image width.

In @media (max-width : 991.98px) media query all the images has the same width. And above that, I have one big image at the top with two smaller one below it.

Also, I am using lazysizes to help me calculate the size. Do I really need to use this?

I appreciate if anyone can help me out here.

https://codepen.io/Sasanmore/pen/zJrEpB

        <figure class="p-2 largefig col-xl-12 col-lg-12">
        <img data-sizes="auto" 
                 alt="test"
                 data-src="https://via.placeholder.com/2880x1920"
                 data-srcset="https://via.placeholder.com/600x400 600w,
                              https://via.placeholder.com/1200x800 1200w,
                              https://via.placeholder.com/1800x1200 1800w,
                              https://via.placeholder.com/2880x1920 2880w"
                 sizes="(min-width: 1200px) 100vw"
                 class="img-fluid lazyload">
        </figure>

        <figure class="p-2 col-lg-6 smallfig col-xl-6">
            <img data-sizes="auto" 
                 alt="test"
                 data-src="https://via.placeholder.com/2880x1920"
                 data-srcset="https://via.placeholder.com/600x400 600w,
                              https://via.placeholder.com/1200x800 1200w,
                              https://via.placeholder.com/1800x1200 1800w,
                              https://via.placeholder.com/2880x1920 2880w"
                 sizes="(min-width: 1200px) calc(0.5 * (50vw - 1em)),
                        (max-width: 991.98px) calc(1 * (100vw - 1em)), 100vw"
                 class="img-fluid lazyload">
        </figure>
SaMo
  • 45
  • 7
  • "I know, there is something wrong but I cannot figure out what it is" - What problems are you seeing? srcset is difficult to debug, you'll need to use your browser in incognito mode / make sure the cache is being cleared. – sol Aug 26 '18 at 01:30
  • Thanks for the hint. I want two smaller images to be at the 1800px because there are almost 50vw. But this is not happening. At all the time is showing 600px images in the full-width screen. – SaMo Aug 26 '18 at 01:48
  • I don't understand what the problem is, can you explain better? – Serg Chernata Aug 28 '18 at 00:56

1 Answers1

0

So I found this great article here and helped me out! https://developers.google.com/web/fundamentals/design-and-ux/responsive/images

And this one also: https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433

SaMo
  • 45
  • 7