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

向右看齐 2021-12-22 09:03 349阅读 0赞

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

1.  `<picture>`
2.  `<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 }
     }

![Image 1][]

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

转载于:https://www.cnblogs.com/JoannaQ/p/3744800.html

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是响应式图片？如何在网页中实现响应式图片？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 响应式图片（Responsive Images） ⭐ 实现响应式图片的方法 1. 使用\`

左手的ㄟ右手/ 2023年10月15日 10:03/ 0 赞/ 57 阅读

相关图片的响应式设计

响应式图像教程 [ ][Link 1] 感谢腾讯课堂NEXT学院赞助本站，腾讯官方的IT课程年终优惠免费试学。 ![腾讯课堂 NEXT 学院][NEXT] 网

柔情只为你懂/ 2023年06月12日 08:49/ 0 赞/ 59 阅读

相关响应式Web设计

1、什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。手机浏览器是把页面放在一个虚拟的"窗口"（vie

Bertha 。/ 2022年09月30日 09:57/ 0 赞/ 277 阅读

相关学习响应式设计

[![Center][]][Center 1] [学习响应式设计][Center 1] 全面覆盖从项目立项到网站上线的工作流程详细讲解响应式设计策略和技巧，

ゝ一世哀愁。/ 2022年08月08日 06:57/ 0 赞/ 230 阅读

相关响应式菜单制作

看看效果： PC端： [![QQ截图20150327215831][QQ_20150327215831]][QQ_20150327215831_QQ_20150327215

绝地灬酷狼/ 2022年08月07日 10:42/ 0 赞/ 224 阅读

相关响应式设计三部曲

原文：[Responsive Design in 3 Steps][] 译文：响应式设计的三个步骤译者：dwqs 现在，响应式Web设计无疑是非常流行的。如果你对响应式

分手后的思念是犯贱/ 2022年08月06日 07:17/ 0 赞/ 225 阅读

相关响应式设计

最近响应式设计很火，而我对其的理解也比较片面，向总的来写一篇关于响应式的笔记。。。~ 我以前对响应式的理解或许更多集中在对于不同屏幕有不同的响应，也就是使用媒体查询功能来实现

一时失言乱红尘/ 2022年07月27日 14:58/ 0 赞/ 259 阅读

相关响应式图片101

来自于w3cplus的响应式图片系列文章 1. [响应式图片101(一)：定义][101] 2. [响应式图片101(二)：图片加载][101 1] 希望对大家有所帮助

本是古典何须时尚/ 2022年05月26日 08:39/ 0 赞/ 279 阅读

相关实现响应式图片

一：jq 通过jq来控制图片的加载，原理就是跟踪window的resize事件，然后修改图片的路径 <body> <div class="con

逃离我推掉我的手/ 2022年05月16日 01:56/ 0 赞/ 279 阅读

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

两种方法实现响应式图片： 1. `<picture>` 2. `<img>` `在该两个标签中使用srcset`和`sizes属性，如：` <article>

向右看齐/ 2021年12月22日 09:03/ 0 赞/ 350 阅读