响应式图片<picture>标签兼容处理(IE9)

最新推荐文章于 2023-06-30 01:25:05 发布

_FEE

最新推荐文章于 2023-06-30 01:25:05 发布

阅读量1.8k

点赞数

分类专栏： HTML 文章标签：响应式图片

本文链接：https://blog.csdn.net/Randy_Shenyp/article/details/77450028

版权

本文介绍了在响应式网站开发中，如何处理IE9浏览器不支持<picture>标签的问题，提出通过图片等比缩放和占位的方式来实现图片的响应式兼容处理。

摘要由CSDN通过智能技术生成

通常我们在进行响应式网站开发的时候，需要对图片进行响应式处理，而IE 9并不能识别<picture></picture>中的<source>标签(让图片自适应)，所以为了兼容IE9，可以这么写:

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 768px)">
  <source srcset="examples/images/large.jpg" media="(min-wi

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_FEE

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

<picture>标签实现响应式图片

kumayato的博客

05-06

527

一个picture标签里面可以包含多个source标签，每个source标签里可以使用媒体查询和设置srcset属性，浏览器会遍历picture标签中的每个source标签，根据当下的情况，找到最合适的srcset,然后来设置img标签的src属性。 <div class="slider-img"> <picture> <source srcset="img/ad001-l.

前端【响应式图片处理】之【picture标签】

最新发布

商务合作/软件定制/学习交流

10-07

314

前端【响应式图片处理】之【picture标签】

参与评论您还未登录，请先登录后发表或查看评论

现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用

Stitch_xiao的博客

02-09

395

现代图片性能优化及体验优化指南 - 图片类型及 Picture 标签的使用

解决ie不兼容picture

小柒的博客

03-05

777

ie默认不支持picture，但picturefill.js可以处理ie的不支持解决方法为html文档底部引入picturefill.min.js

h5学习笔记：picture标签和webp组合

夏天的树人的专栏

03-28

1155

在日常网站的图片使用中，webp格式的优点要比同尺寸的jpg和png小一些，可以提升网站加载的速度。不过在大规模使用还是少见，主要还是兼容性的问题比较突出。前一段时间好奇查看了B站中的M站使用的图片格式，发现了B站采取picture标签呈现图片。什么是picture标签？我们查看一下文档的解释。 1. 什么是picture标签？ HTML 元素通过包含零或多个元素和一个元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子元素，如果没有匹配的，就选择元素的 src 属性中的UR

20 - HTML5新标签和响应式

xyyojl的博客

09-17

1220

HTML5新标签和响应式 HTML5新标签代码规范 响应式 visibility的使用 HTML5是什么 HTML5:标准HTML的第五代版本新增功能: 增加了许多移动端的支持,广义上讲HTML5提供了一套全新的界面设计制作的解决方案本地存储技术:可以制作基于网页的APP,代替普通APP 兼容性:提供性的数据与应用的接口,可直接调用外部比如摄像头接口: 连接推送: ...

react-responsive-picture:面向未来的响应式图像组件，支持最新的Picture规范

05-14

html5高端大气响应式商务连锁酒店网站模板

07-14

5. **图片优化**：考虑到网页加载速度，可能会采用响应式图片技术，如srcset或picture元素，以及WebP等高效图片格式。 6. **Web字体和服务**：可能使用了Web字体服务，如Google Fonts，提供丰富的字体选择，确保跨...

这是一款简单实用的jQuery响应式图片无缝轮播插件

08-11

本文将详细解析一款基于jQuery的响应式图片无缝轮播插件，适用于那些希望在网页中实现优雅图片展示效果的开发者。标题所提及的"简单实用的jQuery响应式图片无缝轮播插件"，主要功能是为网页提供一种动态的图片展示...

响应式图片srcset未生效

黑夜来袭Z

02-26

785

<img srcset="1.png 1920w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 1920px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" /> 问题：调节窗口大小没有触发响应式变更图片原因：在浏览器有缓存中有更高分辨率.

关于picture标签的一点记录

haozihaozi1234的博客

03-23

976

picture是HTML5一个新的元素。你可以在里面放置多个source标签，设置不同的条件，然后浏览器会根据不同的条件进行加载。

为什你应该使用picture标签而不是Img标签

李dayday

06-30

418

点击上方关注TianTianUp，一起学习，天天进步大家好，我是小弋。分享的内容是为什你应该使用picture标签而不是Img标签。写在前面在用户界面中使用图片和动画已经成为现代网络应用...

图片：前端展示图像(img 、picture、svg、canvas )及常用图片格式(PNG、JPG、JPEG、WebP、GIF、SVG、AVIF、JFIF等)

热门推荐

snowball的博客

06-30

1万+

与其他图像格式相比，TIFF格式可以存储更大的文件大小，具有更多的细节和更高的分辨率，使得用户可以更准确地保留和传输高质量的图像和照片。原因是同样大小的jpg和png图片下载的时间是相同的,但是jpg图片是有RGB三种描述的, 而png是有ARGB四种描述的,带有透明度,所以浏览器解码png图片要花更多的时间,因此jpg格式比png加载的快。是的，BMP格式图片可以用于浏览器。总之，DDS格式是一种高效、灵活和功能强大的图像格式，可以提供高质量的图像，并在游戏和应用程序中提高性能和速度。

基于Viewport的移动端web屏幕基本适配方案详解

qq_43293207的博客

02-21

4623

欢迎访问个人博客网站： http://www.zhuxin.club 1. 前言随着手机，平板等移动设备的普及，现如今的绝大多数web应用会对桌面端和移动端进行网页适配的兼容处理。由于移动端和桌面端设备的型号和分辨率种类比较繁杂，如果专门为这些不同设备和终端分别建立网站显然成本太高，很不现实，并且它们之间的界限也很模糊。所以创建可以适配多种设备的web应用是如今web开发的基本需求。在我们具体分析主流的适配方案之前，先让我们了解一下以下这些主要概念： 2. 各种“像素” 2.1 物理像素物理像素（又称

html5 图像标签

weixin_49346755的博客

09-30

2659

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签。标签用于定义图像，是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。

<picture>-浏览器内置的响应式标签（翻译）

ljinkai_ljk的专栏

06-04

1055

<picture>标签提供可声明式的方式来加载图片。网页开发者不必非要用CSS和JS来处理响应式的图片加载。用这种方式的好处是提高加载速度—尤其是在移动端时网络情况不好的时候。

为什么要用 picture 标签代替 img 标签？

qq_34998786的博客

03-09

530

作者 | Chameera Dulanga译者 | 王强策划 | 李俊辰本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。在用户界面中使用图像和动画已成为现...

H5新特性之picture

有问题可关注公众号：前端研究院后台输入问题回复

06-11

483

这个特性就是根据不同的浏览器分辨率，显示不同对应的图片。大家可以自己试下效果哈

44、(1分)在HTML中，下面哪个标记用于添加图像？ OA、<image> OB、<img>, OC、<picture> OD、<photo>

06-01

在HTML中，`<img>`标签用于添加图像，选项B是正确的。`<img>`标签是一个自闭合标签，通常用于在网页中插入图像。...需要注意的是，为了防止图片加载失败或者用户禁用了图片加载，应该始终为`<img>`标签设置`alt`属性。