Question

我正在尝试使用<picture>并根据屏幕显示1x或2x图像。

<picture class="general-info__photo">
        <source srcset="images/me2x.png" media="
                    only screen and ( min-resolution: 200dpi),
                    only screen and ( min-resolution: 1.25dppx)">
        <img src="images/me1x.png" alt="my photo">
    </picture>

它可以在我的视网膜Macbook上使用，但是我在iPhone 5s上看到1x图像。如何解决这个问题？

Answer 1

使用wflag，我们可以告诉浏览器我们拥有相同的图像，但宽度不同。该宽度类似于在媒体查询中使用max-width CSS属性。

<img
  src="/images/me2x.png"
  alt="my photo"
  srcset="/images/me2x-medium.png 1024w,
               /images/me2x-large.png 2048w,
               /images/me2x.png 800w"
/>

Answer 2

尝试这个：

<picture>
  <source media="(min-width: 650px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeP5nKHpuyus4LcJwBHjR2aDC6m28FSD9e-5dCu2Kl7rglEpVflQ">
  <source media="(min-width: 465px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsPqgViwHdLlxPgRl6uC1NCe5t8jxyq9-m1gM6S3b6yy6jrqLa">
  <img src="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Flowers" style="width:auto;">
</picture>

Answer 3

<picture class="general-info__photo">
            <img sizes="160px"
                 src="images/me.png"
                 alt="my photo"
                 srcset="images/me2x.png 320w, images/me.png 160w"
            />
        </picture>

如何在视网膜手机上显示<picture>的2x图像？

3 个答案: