html5+css3响应式布局-图片响应
第一种方式：浏览器窗口宽度大于1200px的时候图片为timg.jpg,浏览器窗口宽度小于768px的时候图片为timg2.jpg。
<!doctype html> <html> <head> <meta charset="utf-8"/> <style> #div1{width:100%; margin:0 auto} #div1 img{width:100%} </style> </head> <body> <div id="div1"> <picture> <source media="(min-width:1200px)" srcset="img/timg.jpg"/> <source media="(max-width:768px)" srcset="img/timg2.jpg"/> <img src="img/timg2.jpg" alt=""/> </picture> </div> </body> </html>第二种方式：浏览器窗口宽度大于1200px的时候，图片尺寸固定在1200px，不在随着浏览器窗口的变化而变化。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
#div1{width:100%; height:300px}
#div1 img{width:100%; height:300px}
@media(min-width:1200px){
#div1{width:1200px}
}
</style>
</head>
<body>
<div id="div1">
<img src="img/timg.jpg"/>
</div>
</body>
</html>