2

I need to display a full screen image at the top of my page and naturally on mobiles when orientation is changed from landscape to mobile I need a different version of this image.

I then created multiple versions for landscape and portrait mode. It works fine when the browser loads the page for the first time in both landscape and portrait but then when I flip between the modes it just keeps one version of the file and will not switch.

<img class="responsive" src="static/images/title_photo/title_glass_building_960x540.jpg"
                     srcset="static/images/title_photo/title_glass_building_480x270.jpg 480w,
                            static/images/title_photo/title_glass_building_750x1334.jpg 750w,
                            static/images/title_photo/title_glass_building_960x540.jpg 960w,
                            static/images/title_photo/title_glass_building_1080x1920.jpg 1080w,
                            static/images/title_photo/title_glass_building_1125x2436.jpg 1125w,
                            static/images/title_photo/title_glass_building_1242x2436.jpg 1242w,
                            static/images/title_photo/title_glass_building_1334x750.jpg 1334w,
                            static/images/title_photo/title_glass_building_1442x2562.jpg 1442w,
                            static/images/title_photo/title_glass_building_1920x1080.jpg 1920w,
                            static/images/title_photo/title_glass_building_2562x1442.jpg 2562w,
                            static/images/title_photo/title_glass_building_3840x2160.jpg 3840w"
                     sizes="(max-width: 480px) and (orientation: landscape) 100vw,
                            (max-width: 750px) and (orientation: portrait) 100vw,
                            (max-width: 960px) and (orientation: landscape) 100vw,
                            (max-width: 1080px) and (orientation: portrait) 100vw,
                            (max-width: 1125px) and (orientation: portrait) 100vw,
                            (max-width: 1242px) and (orientation: portrait) 100vw,
                            (max-width: 1334px) and (orientation: landscape) 100vw,
                            (max-width: 1442px) and (orientation: portrait) 100vw,
                            (max-width: 1920px) and (orientation: landscape) 100vw,
                            (max-width: 2562px) and (orientation: landscape) 100vw,
                            (min-width: 2563px) and (orientation: landscape) 100vw"
                     alt="image">

So let's take a situation that I tested: Iphone 6, screen resolution is 1334 x 750 px.

I load the page with cache cleared in portrait mode - the correct 750 x 1334 px image is chosen.

I load the page with cache cleared in landscape mode - the correct 1334 x 750 px image is chosen.

But now I flip back to portrait and it just uses the 1334 x 750 px landscape image...

Now I understand it just keeps the image in cache.

Is the solution to forcing browser using correct image the picture element ?

Thanks for spending your time on this...

Tom

Tomasz Kluczkowski
  • 145
  • 1
  • 11

1 Answers1

0

Changing orientation is a case of Art Direction, which requires <picture>. <img srcset…> is only for cases where the image content and ratio don't change.

You should read https://cloudfour.com/thinks/responsive-images-101-part-6-picture-element/

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24