响应式图片布局

 

<!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  小白知浅  阅读(314)  评论(0)    收藏  举报