为横向和纵向切换正确设置 scrset答案

【问题标题】：Make scrset for landscape and portrait switch properly为横向和纵向切换正确设置 scrset
【发布时间】：2018-02-12 19:01:13
【问题描述】：

当方向从横向更改为移动设备时，我需要在页面顶部显示全屏图像，并且自然会在手机上显示我需要此图像的不同版本。

然后我为横向和纵向模式创建了多个版本。当浏览器第一次以横向和纵向加载页面时它工作正常，但是当我在模式之间切换时它只保留一个文件版本并且不会切换。

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

让我们以我测试过的情况为例： Iphone 6，屏幕分辨率为 1334 x 750 像素。

我在纵向模式下加载清除缓存的页面 - 选择了正确的 750 x 1334 像素图像。

我在横向模式下加载清除缓存的页面 - 选择了正确的 1334 x 750 像素图像。

但现在我转回纵向，它只使用 1334 x 750 像素的横向图像...

现在我知道它只是将图像保存在缓存中。

强制浏览器使用正确图片的解决方案是图片元素吗？

感谢您抽出宝贵的时间...

汤姆

【问题讨论】：

标签： html responsive-images

【解决方案1】：

改变方向是艺术指导的一种情况，需要<picture>。 <img srcset…> 仅适用于图片内容和比例不变的情况。

你应该阅读https://cloudfour.com/thinks/responsive-images-101-part-6-picture-element/

【讨论】：