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

更改方向是Art Direction的一个案例，需要<picture>。 <img srcset…>仅适用于图片内容和比例不会发生变化的情况。

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

使风格和纵向交叉正确的scrset

1 个答案: