关于自适应图片

以你之姓@ 2022-05-01 12:16 227阅读 0赞

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>元素时，它可以作为后备方案。
    复制代码

转载于:https://juejin.im/post/5cc666b6e51d456e5c5bab7a