html中的響應式圖片
阿新 • • 發佈:2019-02-08
src sport set ccf auto 多個 .com txt aid
html中的響應式圖片
img
sizes 指定屏幕尺寸 srcset 指定可以使用的圖片和大小,多個使用逗號分隔,需要指定圖片的真實寬度,個人覺得沒有picture好用 <img sizes="(min-width: 1200px) 680px, (min-width: 640px) 500px, 300px" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549557630523&di=2513b0fcc78a65820a90319ccff64abc&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsports%2F2_img%2Fsipaphoto%2F49d350e9%2F20171027%2FJlH_-fynfvfi1121420.jpg 680w" >
picture
<picture> <source media="(min-width: 1200px)" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549557630523&di=2513b0fcc78a65820a90319ccff64abc&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsports%2F2_img%2Fsipaphoto%2F49d350e9%2F20171027%2FJlH_-fynfvfi1121420.jpg" /> <source media="(min-width: 680px)" srcset="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549558311010&di=3f5e401100be857a9d7b13058d59d0b3&imgtype=0&src=http%3A%2F%2Fimg3.redocn.com%2F20120322%2FRedocn_2012031914403578.jpg" /> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3932493901,3759456434&fm=26&gp=0.jpg" style="width: auto;" > </picture>
html中的響應式圖片