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

如果您需要为所有视口尺寸显示相同的图像，那么我建议您使图像的行为类似于flex-box，以使其具有响应性。这样，您不必担心@media (min-width)断点。并且图像将始终填满整个视口宽度（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" />

如果需要为不同显示器上的用户更改图像，建议使用<img srcset="" sizes=""/>。
  如果您希望移动用户查看Image-1，
  使用平板电脑的用户可以查看Image-2和
  具有台式机的用户可以查看Image-3，
  那么您可以使用<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 */

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

我希望这会有所帮助。

和平?

图像密码集大小

1 个答案: