移动浏览器未使用正确的响应图像

时间:2018-10-09 21:10:37

标签: html css image mobile responsive

当我在开发实用程序中切换到移动模式时,我的响应图像在台式机Chrome上可以正常工作...但是,当我实际在s7,s5,s3或iPhone上查看网站时(不确定我的妻子是哪种型号)有),则显示了错误的图像。

这是测试页。

http://herschbachphotography.com/gallery_index/imagetest.html

横幅图像标记为“移动”,“ S”,“ M”或“ L”,以验证正在使用的图像。第二个垂直黑白图像标记为S,M或L。

以下是图片的代码:

<img
            id="banner"
            src="../graphics/banner_19202.jpg"
            sizes=" (max-width: 480px) 480px,
                    (max-width: 1280px) 1280px,
                    (max-width: 1920px) 1920px,
                    (min-width: 1921px) 2560px,
                    100vw"
            srcset="../graphics/banner_4802.jpg 480w,
                    ../graphics/banner_12802.jpg 1280w,
                    ../graphics/banner_19202.jpg 1920w,
                    ../graphics/banner_25602.jpg 2560w"
            alt="Tim Herschbach Fine Art Photography"/>

<img
                    class="vertical"
                    src="../galleryphotos/doveinsnow_medium2.jpg"
                    sizes=" (max-width: 675px) 271px,
                            (max-width: 1920px) 620px,
                            (min-width: 1921px) 1240px,
                            100vw"
                    srcset="../galleryphotos/doveinsnow_small2.jpg 271w,
                            ../galleryphotos/doveinsnow_medium2.jpg 620w,
                            ../galleryphotos/doveinsnow_large2.jpg 1240w"
                    alt="Dove In Snow photograph"/>

0 个答案:

没有答案