<!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>