HTML5 中使用 picture 标签设置在不同的屏幕尺寸下加载显示不同的图片

一、代码实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入框架支持文件开始-->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css">
    <!--引入框架支持文件结束-->
    <title>首页</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col p-0">
                <!--使用 picture 元素可以在 HTML 中实现图片的响应式加载-->
                <picture>
                    <!--使用 source 元素及其属性指定在不同的条件下加载不同的图片数据源-->
                    <source media="(max-width:650px)" srcset="./imgs/banner1.jpg">
                    <!--这里 source 的作用是如果没有相匹配到的条件则默认加载这个图片源指定的图片-->
                    <source srcset="./imgs/head_bg1.jpg">
                    <!--这里 img 元素的设定是为了浏览器不兼容 picture 元素时默认显示这个-->
                    <!--这里 img 元素还可以用来设置想要复加的样式-->
                    <!--注意 source 元素中任意一个条件限制一旦匹配到则使用其指定的图片数据源默认替换 img 元素中的 src 图片数据源属性以便显示-->
                    <img src="./imgs/head_bg1.jpg" alt="" style="width: 100%;height: auto;">
                </picture>
            </div>
        </div>
    </div>


    <!--引入框架支持文件开始-->
    <script src="libs/jquery/jquery.min.js"></script>
    <script src="libs/popper/popper.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <!--引入框架支持文件结束-->
</body>
</html>

二、实例截图

 

posted on 2021-03-25 14:47  陈先生的博客  阅读(755)  评论(0)  编辑  收藏  举报

导航