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

向右看齐 2021-12-22 09:03 288阅读 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 条评论，288人围观）

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

相关阅读

相关响应式Web设计

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

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

相关学习响应式设计

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

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

相关响应式菜单制作

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

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

相关响应式设计三部曲

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

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

相关响应式设计

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

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

相关（10）响应式宣言、响应式系统与响应式编程——响应式Spring的道法术器

> 本系列其他文章见：[《响应式Spring的道法术器》][Spring]。 > 前情提要：[响应式编程][Link 1] | [响应式流][Link 2] 1.5 响

水深无声/ 2022年05月30日 10:24/ 0 赞/ 334 阅读

相关 HTML5 响应式图片

响应式图片的核心目的只写一遍代码，就能适用所有设备。（img 标签等价于 image 标签） 1、通过 srcset 切换分辨率（1）通过分辨率切换

末蓝、/ 2022年05月27日 01:52/ 0 赞/ 197 阅读

相关响应式图片101

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

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

相关实现响应式图片

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

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

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

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

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