CSS3 - 响应式图片项目实战

最新推荐文章于 2023-04-11 20:35:59 发布

UIEngineer

最新推荐文章于 2023-04-11 20:35:59 发布

阅读量181

点赞数

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/zjsfdx/article/details/79331679

版权

HTML5/CSS3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

这里写图片描述

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js" async></script>
</head>

<body>
    <div class="imgContainer">
        <h2>picture source media</h2>
        <h2>srcset设置响应式图片</h2>
        <!-- 如果图片尺寸最小宽度为900px,则图片尺寸为900px，否则为100% -->
        <!-- srcset 根据不同宽度，加载不同图片 -->
        <img sizes="(mim-width:900px) 900px,100vw"
             srcset="images/00.jpg 480vw,       
                      images/01.jpg 640vw,
                      images/02.jpg 720vw,
                      images/03.jpg 900vw"
        src="demo.jpg" 
        alt="responsive images" id="myImg" />
    </div>


</body>
</html>

该方案兼容性不好

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">

</head>

<body>
    <div class="imgContainer">
        <h2>picture source media</h2>
        <picture>
            <source media="(max-width:480px)" srcset="images/00.jpg" />
            <source media="(max-width:640px)" srcset="images/01.jpg" />
            <source media="(max-width:720px)" srcset="images/02.jpg" />
            <source media="(max-width:900px)" srcset="images/03.jpg" />
            <img src="demo.jpg" alt="responsive images" />
        </picture>

    </div>
    <script src="https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js" async></script>

</body>
</html>