html - 图像 srcset 大小

Question

我有这个:

  <img class="poster" srcset="https://image.tmdb.org/t/p/original/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg 1024w,
                                        https://image.tmdb.org/t/p/w780/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg 700w,
                                        https://image.tmdb.org/t/p/w500/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg 400w"
                                sizes="100vw" 
            />

我希望浏览器在屏幕的底部加载图像，如果是移动设备 w500、平板电脑 w780 和 pc 原始设备，我该怎么做？

Answer 1

如果您需要为所有视口(viewport)尺寸显示相同的图像，那么我建议您使图像表现得像 flex-box。使其响应。通过这样做，您不必担心 @media (min-width)断点。并且图像将始终填满整个视口(viewport)宽度(100vw)。

Here is such a code :

body {
  margin: 0;
  padding: 0;
}

.poster {
  max-width: 100%;
  display: block;
  height: auto;
}

<img class="poster" src="https://image.tmdb.org/t/p/original/eSzpy96DwBujGFj0xMbXBcGcfxX.jpg" />

Using <img srcset="" sizes=""/> is recommended if you need to change the image for users on different displays.
If you want the userswith mobile to view Image-1,
Users with tablet to view Image-2 and
Users with desktops to view Image-3,
then you can do so easily by using <img srcset="" sizes=""/>.

这是实现它的代码示例，

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #222;
  margin: 0;
  padding: 0;
  height: 100vh;
}

<img src="https://picsum.photos/1024/512?image=0"
     srcset="https://picsum.photos/1024/512?image=2 1024w,
             https://picsum.photos/780/390?image=4 780w,
             https://picsum.photos/500/250?image=6 500w"
     sizes="(min-width: 1024px) 1024px, /* For Desktop users */
            (min-width: 780px) 780px, /* For Tablet users */
            500px">  /* Default for Mobile users */

更改视口(viewport)宽度，您会看到图像在宽度增加的同时发生变化。

---

希望对您有所帮助。

和平🖖