html标签，解读一下picture以及用在picture内的source标签

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

有了img标签，为啥还有个picture标签？因为picture和img的拼写不一样，用法也不一样。picture是专门用于响应式图片显示的标签，十年前这个picture还是个概念，但是在目前，这个picture标签就已经被各大浏览器支持了。

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述响应式图片标签picture的使用方法。测试环境：谷歌浏览器。

测试代码

一共准备了三张图片，按理说这三张图片应该是像素密度清晰度不同的，有如apk中的1x、2x、3x图片。但是，事实上，为了测试效果演示，这里是使用了三张同样像素的图片，分别标志数字一二三用于区分，并且表现形式上使用了相同的尺寸（width)。

利用sketch软件，就可以同时生成不同清晰度的图片。

完整代码：

<style>
  picture {
    width: 100px;
    float: left;
    display: block;
    background-color: red;
  }
  picture img {
    width: 100px;
  }
</style>
<picture>
  <source media="(max-width:550px)" srcset="1.png" />
  <source media="(max-width:650px)" srcset="2.png" />
  <source media="(max-width:850px)" srcset="3.png" />
  <img src="1.png" />
</picture>

<span id="width"></span>
<span id="src"></span><br />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $(window).resize(function () {
    $("#width").text("视口宽：" + $(this).width());
    $("#src").text("加载的是：" + $("picture img")[0].currentSrc);
  });
</script>

核心代码如下：

<picture>
  <source media="(max-width:550px)" srcset="1.png"/>
  <source media="(max-width:650px)" srcset="2.png"/>
  <source media="(max-width:850px)" srcset="3.png"/>
  <img src="1.png"/>
</picture>

最后的img标签是必须有的，否则不能显示图片！

这里使用了以前在css中才会出现的媒体查询的media概念。媒体查询其实是个非常大的概念，可以查询的内容也非常多。不过，在平时的使用中，还是经常使用min-width或者max-width之类的视窗宽度的表达方式。

更全面的媒体查询的概念（苏南大叔理解着，就是可以查询当前硬件的情况），可以参考：

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries

当然，媒体查询主要是用在css里面的，所以，也不一定所有的语法在这个source标签里面都能支持。比如：device-pixel-ratio在source的media里面，目前就没有测试成功。如果您测试成功了，可以留言给我。

代码解说

这个代码中，使用picture标签包裹了几个source标签，和一个img标签。source标签里面，用媒体查询对了当前图片的适用情况进行了查询，选择第一个符合要求的图片显示。当然，最后一个没有设置任何媒体查询信息的img就是默认打底信息了。

测试方法：不断改变浏览器的宽度，观察图片的变化。

执行结果如下图所示：

特殊之处

这里有个特殊的地方，picture标签无论按照哪个media选择了source，最终在css控制里面，都是picture img{}。也就是说source仅仅提供了个数据源，最终还是作用到了img标签上。

第一个所见非所得的例子...

picture img {
  width: 100px;
}

从下面的js获得img的currentSrc属性，也可以看到上述结论是完全正确的。

$("picture img")[0].currentSrc;

随着宽度的变化，最终的img的src属性一直在变化，证实猜测正确。

结束语

更多奇奇怪怪的html标签或者css使用方法，可以参考：

• https://newsn.net/tag/html5/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。