关于自适应图片

img上面如今有这两个属性可使用srcset 和 sizes

<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
srcset定义了咱们容许浏览器选择的图像集，以及每一个图像的大小。在每一个逗号以前，咱们写：一个文件名 (elva-fairy-480w.jpg.)一个空格图像的固有宽度（以像素为单位）（480w）——注意到这里使用w单位，而不是你预计的px。这是图像的真实大小，能够经过检查你电脑上的图片文件找到（例如，在Mac上，你能够在Finder上选择这个图像，而后按 Cmd + I 来显示信息）。sizes定义了一组媒体条件（例如屏幕宽度）而且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—咱们在以前已经讨论了一些提示。在这种状况下，在每一个逗号以前，咱们写：一个媒体条件（(max-width:480px)）——你会在 CSS topic中学到更多的。可是如今咱们仅仅讨论的是媒体条件描述了屏幕可能处于的状态。在这里，咱们说“当视窗的宽度是480像素或更少”。一个空格
当媒体条件为真时，图像将填充的槽的宽度（440px）


通时还可使用<picture>元素
<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
 <source>元素包含一个media属性，这一属性包含一个媒体条件——就像第一个srcset例子，这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在这种状况下，若是视窗的宽度为799px或更少，第一个<source>元素的图片就会显示。若是视窗的宽度是800px或更大，就显示第二张图片。srcset属性包含要显示图片的路径。请注意，正如咱们在<img>上面看到的那样，<source>可使用引用多个图像的srcset属性，还有sizes属性。因此你能够经过一个 <picture>元素提供多个图片，不过也能够给每一个图片提供多分辨率的图片。实际上，你可能不想常常作这样的事情。在任何状况下，你都必须在 </picture>以前正确提供一个<img>元素以及它的src和alt属性，不然不会有图片显示。当媒体条件都不返回真的时候（你能够在这个例子中删除第二个<source> 元素），它会提供图片；若是浏览器不支持 <picture>元素时，它能够做为后备方案。
复制代码