响应式设计中的响应式图片制作

最新推荐文章于 2022-04-10 08:00:00 发布

weixin_34061042

最新推荐文章于 2022-04-10 08:00:00 发布

阅读量141

点赞数

两种方法实现响应式图片：

<picture>
<img>

在该两个标签中使用srcset和sizes属性，如：

<article>
    <img  src="small.png"
          srcset="large.png 1280w, medium.png 640w, small.png 320w"
          sizes="(man-width:500px) 700x, 100vm" 
          alt="Alternate text" />
</article>

配合的css如下

article{
    margin: 0 auto;
    max-width: 700px; 
}
@media (max-width: 500px) {
  img {width: 250px }
 }

<picture>
   <source media="(min-width: 36em)"
           srcset="large.jpg  1024w,
                   medium.jpg 640w,
                   small.jpg  320w"
           sizes="33.3vw" />
   <source srcset="cropped-large.jpg 2x,
                   cropped-small.jpg 1x" />
   <img src="small.jpg" alt="A rad wolf" />
</picture>

转载摘抄翻译自：

http://css-tricks.com/video-screencasts/133-figuring-responsive-images/?utm_source=dlvr.it&utm_medium=twitter
http://scottjehl.github.io/picturefill/
http://martinwolf.org/2014/05/07/the-new-srcset-and-sizes-explained/
http://ericportis.com/posts/2014/srcset-sizes/