Question

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

＆＃13;

img {
  max-width: 100%;
}

＆＃13;

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

＆＃13;

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

图片未在移动版

1 个答案: