html - 正确制作横向和纵向切换的scrset

Question

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

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

<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 像素的横向图像...

现在我明白它只是将图像保存在缓存中。

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

感谢您花时间在这...

汤姆

Answer 1

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

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