手机上不显示图片答案

【问题标题】：Image is not showing on mobile手机上不显示图片
【发布时间】：2018-02-22 18:24:18
【问题描述】：

我正在尝试在不同的屏幕尺寸上显示不同的图像。如果我调整窗口大小，禁用缓存并刷新就可以了，但是当我选择设备以特定屏幕分辨率查看结果时，图像无法正确显示。当设备是 iPad (768x1024) - 显示图像 1170x425，iPhone (375x667) - 显示图像 768x480。手机图片未加载。我做错了什么？

img {
  max-width: 100%;
}

<div style="max-width: 1170px; margin: 0 auto;">
    <img srcset="https://i.imgur.com/NM5jNhl.jpg 400w,
                 https://i.imgur.com/PIHmZC1.jpg 768w,
                 https://i.imgur.com/FqVHaE4.jpg 1170w"
         sizes="100vw" src="https://i.imgur.com/FqVHaE4.jpg">
    </div>

【问题讨论】：

jsfiddle.net/nnc3j5n3/3 看起来可以正常工作
调整大小时它可以工作，但如果你在真实设备上它不是。
你 100% 确定 ipad 是 768px 宽吗？如背景颜色变为红色？我正在模拟器 iPad pro 9.7 英寸、iOS 10.2 上测试浏览器的宽度为 770px
在 iPhone 上显示小图像？
哪个是小图？哪款 iPhone？

标签： html css responsive srcset

【解决方案1】：

你应该定义你的尺寸：

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image-800w.jpg">

【讨论】：