HTML5<picture>元素
2024-10-21 12:52:03
HTML5<picture>元素可以设置多张图片
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script src="Css/jquery-2.1.4.js"></script>
</head>
<body>
<picture>
<source srcset="Images/HTML5LOGO.jpg" media="max-width:400px" />//小屏幕显示的图片
<source srcset="Images/HTML5LOGO.jpg" />//大屏幕显示的图片
<img src="Images/HTML5LOGO.jpg" alt="logo5" />//不支持picture元素的图片
</picture>
</body>
</html>
srcset 属性的必须的，定义了图片资源。
media 属性是可选的，可以在媒体查询的 CSS @media 规则 查看详情。
对于不支持 <picture> 元素的浏览器你也可以定义 <img> 元素来替代。
最新文章
- JS高程4.变量，作用域和内存问题（1）
- 【leetcode】Excel Sheet Column Title & Excel Sheet Column Number
- oracle_空值判断
- WCF入门教程二[WCF应用的通信过程]
- Redis、Redis+sentinel安装（Ubuntu 14.04下Redis安装及简单测试）
- 关于解决Permission is only granted to system apps
- I.MX6 隐藏电池图标
- Lombok(1.14.8) - @NonNull
- XSD - <schema> 元素
- 阿里云ECS主机自定义进程监控
- 微信小程序教学第四章第二节（含视频）：小程序中级实战教程：详情-视图渲染
- Invoke-ASCmd 部署SSAS database
- 【设计模式】单例模式 Singleton Pattern
- 流程控制:顺序结构: 代码默认从上到下依次执行 分支结构: 细分在分为如下 循环结构: while .. for ..
- IDEA解决SVN更新冲突
- BZOJ4177Mike的农场——最小割
- Java基础4-面向对象概述;super();this()
- VS2013 VS2015 VS2017调试出现无法启动iis express web服务器
- tab------左右布局
- L1-052 2018我们要赢