什么是IMG标签中的srcset属性以及如何使用它？ [英] What is an srcset attribute in IMG tag and how to use it?

问题描述

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

 < img srcset =banner-HD。 jpeg 2x，banner-phone.jpeg 100w，banner-phone-HD.jpeg 100w 2xalt =Banner Image/> 
  

解决方案

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

---

这是一个较长的答案，它解释了更多细节。

srcset和图片之间的区别。 srcset 和图片的功能大致相同，但存在细微差别：图片指示浏览器应该使用什么图像，而 srcset 为浏览器提供了一个选择。很多东西可以用来选择这个选项，比如视口大小，用户偏好，网络条件等等。对 srcset 的支持非常好，几乎所有当前的浏览器或多或少支持它。使用图片元素的情况是稍微差一点。

描述符只是一种显示资源后面隐藏的图像的方式。有各种各样的描述符：

• 密度描述符。 srcset =image.jpg，image-2X.jpg 2x
  显示密度值 - 1x，2x等被称为显示密度描述。如果没有提供显示密度描述符，则假定为1x。定位视网膜显示的良好变体。


• 宽度描述符。 srcset =image-240.jpg 240w，image-640.jpg 640w。我相信这是不言自明的。唯一的问题是，自身的宽度描述符并不是真的有用。 为什么？请阅读这里


• 尺寸描述符，这只有在使用宽度描述符时才有意义。 srcset =image-160.jpg 160w，image-320.jpg 320w，image-640.jpg 640w，image-1280.jpg 1280wsizes =（max-width：480px）100vw，（ max-width：900px）33vw，254px> 。浏览器的说明如下所示：（max-width：480px）100vw - 如果视口宽度为480像素或更小，图像将为100％视口宽度。 （max-width：900px）33vw - 如果视口宽度为480像素或更小，则由于之前的媒体条件，此规则永远不会到达。而254px是当没有列出媒体条件时，假定其长度为默认值，当其他媒体条件都不符合时使用。 b

  为了完整性，在这里会添加一个 image-set（）属性为CSS中的背景图像和其他一些有用的链接此处

  
  

  I want to know how could I start using the HTML srcset img attribute in my mobile apps. Or Is there any other jQuery plugin which helps me to solve image resolution problem.

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

  解决方案

  In short, Srcset is a new attribute which allows you to specify different kind of images for different screen-sizes/orientation/display-types. The usage is really simple, you just provide a lot of different images separating them with a comma like this: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. Here is an example: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

  ---

  This is a longer answer which explains things in more details.

  Difference between srcset and picture. Both srcset and picture does approximately the same things, but there is a subtle difference: picture dictates what image the browser should use, whereas srcset gives the browser a choice. A lot of things can be used to select this choice like viewport size, users preferences, network condition and so on. The support for srcset is pretty good and almost all current browsers more or less support it. Situation with a picture element is a little bit worse.

  Descriptors are just a way to show what kind of image is hidden behind the resource. There are various kinds of descriptors:

  • density descriptor. srcset="image.jpg, image-2X.jpg 2x" The display density values—the 1x, 2x, etc.—are referred to as display density descriptors. If a display density descriptor isn’t provided, it is assumed to be 1x. Good variant to target retina displays.
  • width descriptor. srcset="image-240.jpg 240w, image-640.jpg 640w". I am sure this is self explanatory. The only problem is that by itself width descriptor is not really helpful. Why? read here
  • size descriptor, which only makes sense if you use width 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">. The instructions for the browser would look like this: (max-width: 480px) 100vw — if the viewport is 480 pixels wide or smaller, the image will be 100% of the viewport width. (max-width: 900px) 33vw — if the viewport is 480 pixels wide or smaller, this rule will never be reached because of the previous media condition. And 254px is when there is no media condition listed, the length is assumed to be a default value used when none of the other media conditions are met.

  Just for completeness will add here that there is an image-set() attribute for a background image in CSS and some other helpful link here

  这篇关于什么是IMG标签中的srcset属性以及如何使用它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！