文章/答案/技术大牛

发布

社区首页 >问答首页 >具有srcset和size属性的图像加载大图像。

问具有srcset和size属性的图像加载大图像。
EN

Stack Overflow用户

提问于 2022-03-03 17:25:38

回答 2查看 490关注 0票数 0

我有相同的图像在3个不同的大小，我将优化根据视口和DPR (像素密度比)的设备。

为此，我有以下几点：

<img src="${item.imageUrl}" alt="${item.alt!!}"
srcset="'/static/img/common/testImg/500.jpg' 500w,
        '/static/img/common/testImg/1000.jpg' 1000w,
        '/static/img/common/testImg/1500.jpg' 1500w"

sizes="(min-width: 500px) 1500px, (min-width: 900px) 1000px, 500w">

我想达到的目标是：

从0px到500 0px =>，我想显示500.jpg
从500 to到900 to =>，我想显示1500.jpg
从900 to到XXXX =>，我想显示1000.jpg

问题:如果我在900 If宽后加载页面，则加载1500.jpg img。顺便说一句，我已经结清了现金，DPR是1，这是我的观点：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

谢谢

image

size

srcset

回答 2

Stack Overflow用户

发布于 2022-03-06 20:32:07

根据W3Schools.com，这应该是可行的：

<picture>
   <source media="(min-width:500px)" srcset="/static/img/common/testImg/500.jpg">
   <source media="(min-width:1000px)" srcset="/static/img/common/testImg/1000.jpg">
   <source media="(min-width:1500px)" srcset="/static/img/common/testImg/1500.jpg">
   <img src="/static/img/common/testImg/500.jpg" alt="image" style="width:auto;">
</picture>

如果您感兴趣，您可以在这里找到更多信息：W3Schools源srcset属性

票数 2

Stack Overflow用户

发布于 2022-03-13 03:07:15

我不记得在哪里，但我看到浏览器只使用第一个匹配的madia查询。你应该试试

<img src="${item.imageUrl}" alt="${item.alt!!}"
  srcset="'/static/img/common/testImg/500.jpg' 500w,
          '/static/img/common/testImg/1000.jpg' 1000w,
          '/static/img/common/testImg/1500.jpg' 1500w"
  sizes="(min-width: 900px) 1000px, (min-width: 500px) 1500px, 500px">

(PS:你用了一个坏的单位作为后备尺寸，w而不是px)

请记住，浏览器将使用他们想要的每一个源。具有较高的显示屏幕，浏览器可以使用1000.jpg对500 to宽的图像进行渲染，使图像具有更好的质量。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71341264

复制

相似问题

问具有srcset和size属性的图像加载大图像。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有srcset和size属性的图像加载大图像。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有srcset和size属性的图像加载大图像。
EN