picture

[xgqfrms-GitHub]

picture

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

https://www.w3schools.com/tags/tag_picture.asp

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_picture

调整浏览器大小，以查看在不同视口大小下加载的图片的不同版本。 浏览器将查找媒体查询与用户当前视口宽度匹配的第一个source元素，并获取srcset属性中指定的图像。

img元素是图片声明块的最后一个子标签。 img元素用于为不支持picture元素的浏览器或没有匹配的源标签提供向后兼容性。

[xgqfrms-GitHub]

https://www.w3schools.com/css/css3_images.asp

[xgqfrms]

figure

file:///Users/xgqfrms-mbp/Desktop/CSS%20%E6%8F%AD%E7%A7%98.pdf