35

我想知道如何开始srcset在我的移动应用程序中使用 HTML img 属性。或者是否有任何其他 jQuery 插件可以帮助我解决图像分辨率问题。

<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" />
4

3 回答 3

39

简而言之，Srcset这是一个新属性，它允许您为不同的屏幕尺寸/方向/显示类型指定不同类型的图像。用法非常简单，您只需提供许多不同的图像，用逗号分隔它们：<img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. 这是一个例子：srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

这是一个更长的答案，它更详细地解释了事情。

srcset 和图片的区别。两者srcset和picture做的事情大致相同，但有一个细微的区别：picture规定浏览器应该使用什么图像，而srcset给浏览器一个选择。很多东西都可以用来选择这个选项，比如视口大小、用户偏好、网络状况等等。对的支持srcset非常好，几乎所有当前的浏览器都或多或少地支持它。有picture元素的情况就差一点。

描述符只是显示资源背后隐藏着什么样的图像的一种方式。有多种描述符：

  • 密度描述符。srcset="image.jpg, image-2X.jpg 2x" 显示密度值（1x、2x 等）称为显示密度描述符。如果未提供显示密度描述符，则假定为 1x。针对视网膜显示器的良好变体。
  • 宽度描述符。srcset="image-240.jpg 240w, image-640.jpg 640w". 我相信这是不言自明的。唯一的问题是宽度描述符本身并没有真正的帮助。为什么？在这里阅读
  • size descriptor，仅在使用宽度描述符时才有意义。srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">. 浏览器的指令如下所示：(max-width: 480px) 100vw— 如果视口为 480 像素宽或更小，则图像将是视口宽度的 100%。(max-width: 900px) 33vw— 如果视口为 480 像素宽或更小，则由于之前的媒体条件，将永远无法达到此规则。而 254px 是当没有列出媒体条件时，假定长度是在其他媒体条件都不满足时使用的默认值。

为了完整起见，将在此处添加 CSS 中的背景图像的image-set()属性以及此处的一些其他有用链接

于 2015-08-29T10:36:10.880 回答
7

这是有关 srcset 的详细指南以及代码示例。

srcset允许您定义不同图像资源的列表以及尺寸信息，以便浏览器可以根据实际设备的分辨率选择最合适的图像。

每个逗号分隔的项目srcset都有：

  1. 图片 URL，例如http://ik.imagekit.io/demo/default-image.jpg或相对路径/demo/default-image.jpg
  2. 一个空的空间
  3. 图像的实际宽度或显示密度：
    • 使用显示密度描述符，例如，1.5x等2x。
    • 或者，使用宽度描述符，例如450w. 这是图像的宽度（以像素为单位）。

使用显示密度描述符

显示密度描述符的语法很简单。srcset提供以逗号分隔的图像资源列表以及应使用的显示密度，例如1x等2x。

<img src="image.jpg" 
     srcset="image.jpg,
             image_2x.jpg 2x"
/>

现场演示 - https://imagekitio.github.io/responsive-images-guide/srcset-density.html。

使用宽度描述符

语法类似于显示密度描述符，但我们提供图像的实际宽度而不是显示密度值。

<img src="image.jpg" 
     srcset="small.jpg 300w,
             medium.jpg 600w,
             large.jpg 900w"
/>

这使浏览器可以选择最佳图像

使用宽度描述符允许浏览器srcset根据在运行时在特定显示器上呈现该图像所需的实际宽度从中选择最佳候选者。

请注意，在计算所需宽度时，浏览器也会考虑显示像素密度。

例如，假设图像占据了整个视口宽度 - 在 DPR 2 的 300px 宽屏幕上，浏览器会选择medium.jpg，因为它需要 300x2=600px 宽的图像。在 DPR 值为 3 的 300px 宽屏幕上，浏览器将选择large.jpg，因为它需要 300x3=900px 宽的图像。

演示 - 带有宽度描述符的 srcset

让我们通过现场演示来看看这一点 - https://imagekitio.github.io/responsive-images-guide/srcset-width.html。

于 2020-11-24T07:14:56.973 回答
1

这是一篇关于srcset属性以及如何使用它的好文章。srcet允许您声明要在不同视口大小上显示的一组图像。您只需要以不同的分辨率保存和图像，例如banner-phone-HD.jpeg 将是最高分辨率。

示例：

<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">

以上将为视口宽度低于 640 像素的设备提供banner-phone.jpeg，为小屏幕高 DPI 设备提供banner-phone-HD.jpeg，为屏幕大于 640 像素的高 DPI 设备提供banner-HD.jpeg，以及为banner.jpeg其他一切。

您还可以使用其他方法（例如 CSS 媒体查询）来产生相同的效果。

我不知道有任何 JQuery 插件可以对此有所帮助。

于 2013-10-28T16:58:51.307 回答