html 图片 - picturefill

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 图片 - picturefill相关的知识，希望对你有一定的参考价值。


Basic retina support
<img src="image.png" srcset="image@2x.png 2x" alt="" width="" height="" class="">

Basic svg
<img src="image.svg" onerror="this.src='image.png'; this.onerror=null;" alt="..." width="" height="" class="">

picture element svg

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="image.svg" type="image/svg+xml">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="image.png 1x, image@2x.png 2x" alt="…" width="" height="" class="">
</picture>

responsive picture element

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source src="imageXL.jpg" media="(min-width: 1200px)">
<source src="image1200.jpg" media="(min-width: 1000px)">
<source src="image1000.jpg" media="(min-width: 800px)">
<!--[if IE 9]></video><![endif]-->
<img src="image800.jpg" alt="..." width="" height="" class="">
</picture>

responsive picture element retina support

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="imageXL.jpg, imageXL@2x.jpg 2x" media="(min-width: 1200px)">
<source srcset="image1200.jpg, image1200@2x.jpg 2x" media="(min-width: 1000px)">
<source srcset="image1000.jpg, image1000@2x.jpg 2x" media="(min-width: 800px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="image800.jpg, image800@2x.jpg 2x" alt="..." width="" height="" class="">
</picture>

以上是关于html 图片 - picturefill的主要内容，如果未能解决你的问题，请参考以下文章

html Picturefill标记

js图片上传并预览

SpringMVC框架五：图片上传与JSON交互

Quickblox：删除内容项（图片文件/blob）时出现问题

响应式图像

Pictures & texts synthesiser