响应式图片布局

最新推荐文章于 2022-02-12 02:21:53 发布

小白知浅

最新推荐文章于 2022-02-12 02:21:53 发布

阅读量231

点赞数

本文链接：https://blog.csdn.net/HY909475/article/details/88788717

版权

响应式图片布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式图片布局</title>
    <link rel="stylesheet" type="text/css" href="begin.css" />
</head>
<body>
    <div class="imgContainer">
        <h2>picture source media</h2>
        <picture>
            <source media="(max-width:480px)" srcset="img/1.jpg" />
            <source media="(max-width:640px)" srcset="img/2.jsp" />
            <source media="(max-width:720px)" srcset="img/3.jsp" />
            <source media="(max-width:900px)" srcset="img/4.jsp" />
            <img src="img/2.jpg" />
        </picture>
        <br/>
        <h2>srcset设置响应式图片</h2>
        <!-- sizes：媒体查询，浏览器宽度大于900px时，浏览器宽度使用900px，否则浏览器宽度使用100%，
                    这里浏览器宽度并非是指浏览器只有那么宽，而是用于图片的显示
             srcset：设置浏览器不同宽度时使用的不同照片，480w表示宽度为480px时
             src：设置默认的图片 -->
        <img sizes="(min-width:900px) 900px,100vw"
              srcset="img/1.jpg 480w,
                     img/2.jpg 640w,
                     img/3.jpg 720w,
                     img/4.jpg 900w,
                     img/1.jpg 1024w"
             src="img/1.jpg" alt="respo"/>
    </div>
</body>
</html>

posted @ 2018-01-20 16:46 小白知浅阅读( ...) 评论( ...) 编辑收藏

小白知浅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式图片布局

响应式图片布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>响应式图片布局</title> <link rel="styleshee...
复制链接

扫一扫