响应式图片_响应式背景图片 - CSDN
精华内容
参与话题
  • 如何实现响应式图片

    千次阅读 2018-03-07 19:43:28
    记录几种实现响应式图片的方法。一.,js或服务端通过js或者服务端来控制图片的加载,原理就是跟踪window的resize事件,然后修改图片的路径,代码如下<body> <div class="content"&...

    记录几种实现响应式图片的方法。

    一.,js或服务端

    通过js或者服务端来控制图片的加载,原理就是跟踪window的resize事件,然后修改图片的路径,代码如下

    <body>
    
    <div class="content">
        <img src="" alt=""/>
    </div>
    
    <script src="js/vendor/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            function makeImageResponsive() {
                var width = $(window).width;
                var img = $(".content img");
    
                if (width <= 480) {
                    img.attr('src', 'img/480.png')
                } else if (width <= 800) {
                    img.attr('src', 'img/800.png')
                } else {
                    img.attr('src', 'img/1600.png')
                }
            }
    
            $(window).on('resize load', makeImageResponsive());
        })
    </script>
    </body>

    这种形式还有一种类似的变种,就是通过把屏幕或者设备信息写入cookie,获取图片的时候在服务器端选择返回哪种图片,这样就不需要我们来写脚本了。

    二,srcset

    通过js或服务端加载确实可以达到响应式图片的目的,兼容性也非常的好,但是需要我们编码实现响应式的逻辑,在修改的时候也不是很方便属于命令式的实现,以下方法使用声明式的实现,就是把图片的地址声明在html中,由浏览器自行来决定如何加载,这样更加灵活,把展示的逻辑从硬编码中分离出来,降低了耦合。

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html, * {
                margin:0;
                padding:0;
            }
    
            .content {
                width:100%;
                margin:0 auto;
            }
    
            .content img {
                display: block;
                width:100%;
                max-width: 100%;
            }
        </style>
    </head>
    <body>
    <div class="content">
        <img class="image" src="img/480.png"
            srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"/>
    </div>
    </body>

    设置srcset属性后浏览器会根据我们的页面不同,从当前的浏览环境进行感知,然后选择一个图片进行加载。当超过480时,加载的图片变成了800,当超过800时,图片变成了1600。但当我们把屏幕变小时,图片始终是1600,是因为浏览器已经在大的分辨率下加载了大的图片,那么会被默认放在缓存中,使用大的图片不再会有网络消耗,当然使用更大的图片更好咯。

    三,sizes

    前面的第二种方法单独使用的话会有一个坑,就是例如当img的宽度只占50%,当我们加宽宽度的时候,加宽到480,但此时图片的宽度只有240,图片仍然变成了800。这时srcset属性就还需要配合sizes属性进行使用(第二种方法的sizes属性值默认为100vw)。

    <div class="content">
        <img class="image" src="img/480.png"
            srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
            sizes="50vw"/>
    </div>

    sizes属性内还可以写入媒体查询,例如

        <style>
            html, * {
                margin:0;
                padding:0;
            }
    
            .content {
                width:100%;
                margin:0 auto;
            }
    
            .content img {
                display: block;
                max-width: 100%;
            }
        </style>
    </head>
    <body>
    <div class="content">
        <img class="image" src="img/480.png"
            srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
            sizes="(min-width:800px) 800px, 100vm"/>
    </div>

    就是当浏览器宽度小于800时,按照100vw来设置图片;但超过800时,就是定宽了。

    四,picture标签

    <div class="content">
        <picture>
            <source media="(max-width:36em)" srcset="img/tiananmen-s.jpg 768w"/>
            <source srcset="img/tiananmen.jpg 1800w"/>
            <img class="image" src="img/tiananmen.jpg"/>
        </picture>
    </div>

    浏览器会遍历picture内的source设置,直到找到满足当前环境的media,就将此source的srcset赋值给img属性。当然它的具体用法自行百度去啦。

    五,svg



    展开全文
  • 完全响应式图片

    千次阅读 2018-08-08 16:25:46
    &lt;img&gt; 标签的各种用法,利用浏览器属性来根据视窗宽度轻松改变图片源,还可以利用 picture 元素更改图片内容,而且图片...响应式设计要求你的图片能够适应任何设备。 响应屏幕功能和视图 如何为每个...

    <img> 标签的各种用法,利用浏览器属性来根据视窗宽度轻松改变图片源,还可以利用 picture 元素更改图片内容,而且图片并不总是必要的,许多可以用符号代替,比如图标字体以及 CSS 样式等。

    图片作为现代网站开发工作流中一个重要的部分,占据了很大一部分的页面加载、屏幕尺寸,而其构成的因素也十分的多样。响应式设计要求你的图片能够适应任何设备。

    响应屏幕功能和视图

    如何为每个不同性能的设备和不同尺寸的显示器挑选图片?

    之前学到了使用 CSS 背景图片这个方法,通过媒体查询为不同尺寸的视窗显示不同的图片。那样是可以,但也存在问题。使用像这样的媒体查询是企图在设计的时候猜测什么图片在运行时会最合适,你在强迫图片选择浏览器而不是给浏览器提供信息以让它做出最好的选择。媒体查询的另一个问题是它们只参考视窗的大小,而不是图片的实际显示尺寸

    srcset

    srcset 有两种自定义方式,一种使用 x 来区分设备像素比 (DPR),另一种使用 w 来描述图像的宽度

    对设备像素比(x)的反应

    <img src="image_2x.jpg" srcset="image_2x.jpg 2x, image_1x.jpg 1x" alt="a cool image">

    将 srcset 设置为与逗号分隔的一连串 filename multiplier 对相等,其中每个 multiplier 必须是后跟 x 的整数。还有一个作为备用src 属性。浏览器会下载与其 DPR 对应的最佳图片

    例如,1x 表示 1 倍显示屏,2x 表示像素密度为两倍的显示屏,如 Apple 的 Retina 显示屏。

    对图片宽度(w)的反应

    <img src="image_200.jpg" srcset="image_200.jpg 200w, image_100.jpg 100w" alt="a cool image">

    srcset 设置为与逗号分隔的一连串 filename widthDescriptor 对相等,其中每个 widthDescriptor 都以像素为测量单位, 并且必须是后跟 w 的整数。在这里,widthDescriptor 指定每个图片文件的自然宽度,使浏览器能够根据窗口大小和 DPR 选择要请求的最适当的图片。 (如果没有 widthDescriptor,浏览器需要下载图片才能知道其宽度!)

    sizes

    sizes 属性为浏览器提供了有关图片元素显示大小的信息,它实际上不会导致图片大小调整,该操作在 CSS 中执行。

    srcset 与 sizes 配合使用

    <img  src="images/great_pic_800.jpg"
          sizes="(max-width: 400px) 100vw, (min-width: 401px) 50vw"
          srcset="images/great_pic_400.jpg 400w, images/great_pic_800.jpg 800w"
          alt="great picture">

    sizes 由以逗号分隔的 mediaQuery width 对组成。sizes 会在加载流程初期告诉浏览器,该图片会在点击 mediaQuery 时以某个 width 显示

    实际上,如果 sizes 缺失,浏览器会将 sizes 默认为 100vw,表示它预计图片将以全窗口宽度显示。

    sizes 会为浏览器额外提供一条信息,以确保它根据图片的最终显示宽度下载正确的图片文件。

    在本示例中,如果浏览器的窗口宽度等于或小于 400 像素,浏览器知道图片将为全窗口宽度;如果窗口宽度大于 400 像素,则为一半窗口宽度。浏览器知道它具有两个图片选项 - 一个具有 400 像素的自然宽度,另一个具有 800 像素。

    展开全文
  • 响应式图片——

    2018-11-06 17:25:19
    假设一张图片有三种分辨率的版本,一张小的针对小屏幕,一个中等的针对中等屏幕,还有一个比较大的针对所有其他屏幕。要让浏览器知道这三个版本,怎么办呢?看代码: &lt;img src="scones_small.jpg" ...

    通过 srcset 切换分辨率
    假设一张图片有三种分辨率的版本,一张小的针对小屏幕,一个中等的针对中等屏幕,还有一个比较大的针对所有其他屏幕。要让浏览器知道这三个版本,怎么办呢?看代码:

    <img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_
    large.jpg 2x" alt="Scones taste amazing">
    
    
    

    这是实现响应式图片的最简单语法,我们必须把它完全搞明白。
    首先, src属性是大家已经熟悉的,它在这里有两个角色。一是指定1倍大小的小图片,二是在不支持srcset属性的浏览器中用作后备。正因为如此,我们才给它指定了最小的图片,好让旧版本的浏览器以最快的速度取得它。
    对于支持srcset属性的浏览器,通过逗号分隔的图片描述,让浏览器自己决定选择哪一个。图片描述首先是图片名(如scones_medium.jpg),然后是一个分辨率说明。本例中用的是1.5x和
    2x,其中的数字可以是任意整数,比如3x或4x都可以(如果你的用户可能使用那么高分辨率的屏幕)。不过有个问题。 1440像素宽、 1x的屏幕会拿到跟480像素宽、 3x的屏幕相同的图片。


    在响应式设计中,经常可以看到小屏幕中全屏显示,而在大屏幕上只显示一半宽的图片。要把我们的意图告诉浏览器,怎么办呢?看代码:

    <img srcset="scones-small.jpg 450w, scones-medium.jpg 900w"
    sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmall.
    jpg" alt="Scones">
    
    

    这里照样使用了srcset属性。 不过,这一次在指定图片描述时,我们添加了以w为后缀的值。
    这个值的意思是告诉浏览器图片有多宽。这里表示图片分别是450像素宽( scones-small.jpg)和900像素宽( scones-medium.jpg)。但这里以w为后缀的值并不是“真实”大小,它只是对浏览器的一个提示,大致等于图片的“CSS像素”大小。使用w后缀的值对引入sizes属性非常重要。通过后者可以把意图传达给浏览器。

    sizes属性的第二个值,意思其实是“嘿,浏览器,如果设备宽度大于等于40em,我只想让对应的图片显示为50vw宽”。我们用DPI(或表示Device Pixel Ratio的DPR,即设备像素比)来解释就明白了。比如,如果设备宽度是320像素,而分辨率为2x(实际宽度是640像素),那浏览器可能会选择900像素宽的图片,因为对当前屏幕宽度而言,它是第一个符合要求的足够大的图片。


    picture 元素

    最后一种情况就是你希望为不同的视口提供不同的图片。比如第1章的例子,在最小的屏幕
    上,我们希望显示上面涂了果酱和奶油的松饼。在大一点的屏幕上,我们希望显示更大一点的图
    片,也许是一张摆满各式蛋糕的桌子的照片。最后,对于非常大的屏幕,我们希望用户看到一张
    乡村街道旁的蛋糕店的外景,门外有客人坐在那里吃蛋糕、喝茶(有点像我向往的世外桃源)。
    这样就需要有三张图片,而且要用picture元素:

    <picture>
    <source media="(min-width: 30em)" srcset="cake-table.jpg">
    <source media="(min-width: 60em)" srcset="cake-shop.jpg">
    <img src="scones.jpg" alt="One way or another, you WILL get
    cake.">
    </picture>
    
    

    首先,要知道picture元素只是一个容器,为我们给其中的img元素指定图片提供便利。假如你想为图片添加样式,那目标应该是它内部的那个img。
    其次,这里的srcset属性的用途跟前面例子中的一样。
    再次,这里的img标签是浏览器不支持picture元素,或者支持picture但没有合适媒体定义时的后备。敬告各位,千万别省略picture中的img标签,否则后果可能不堪设想。
    这里最不同的是source标签。在这个标签里,可以使用媒体查询表达式明确告诉浏览器在什么条件下使用什么图片。

    展开全文
  • 真正的响应式图片

    2014-11-25 02:12:25
    不知不觉,现在国外网页已经到了“优先为移动平台创建”的时候了,优点是可以优化CSS结构与代码量,还可以使得移动端用户体验更优质的性能。我目前使用的这个Medium写作平台就是基于“移动先行”策略而开发的,使用...

    不知不觉,现在国外网页已经到了“优先为移动平台创建”的时候了,优点是可以优化CSS结构与代码量,还可以使得移动端用户体验更优质的性能。我目前使用的这个Medium写作平台就是基于“移动先行”策略而开发的,使用起来不论什么方式,它的体验都很棒。

     

    为 小屏幕的移动设备减少数据传输量可以大幅提高移动设备对web的加载性能,而性能对你的用户满意都有着重要的影响。Guy Podjarny做过调查,86%的响应式网站在最小的手机屏幕上浏览时的页面大小与大屏幕是相同的。也就是说虽然采用响应式设计的网站看起来像个移动站 点,实际上它们大多数加载了大屏幕端所有内容,造成的原因无外乎这三种:
    1.下载并隐藏
    2.下载并缩小
    总结一下最近学习到的关于图片优化的相关问题。

     

    1.可以有选择的为手机提供图片。
    例如:许多博客边栏有“相关文章”“推荐文章”这一栏目,其中有一部分带有一张小的缩略图。更小的图片在手机上没有表现意义,可以不加载图片。然而display:no并没有起到优化性能的方法,显然图片依然加载了。
    我们可以用Jquery解决它。matchMedia https://github.com/paulirish/matchMedia.js 这是一个CSS media queries。它可以告诉浏览器,只有当图片比matchMedia中的第一个断点大才插入图片。
    我不精通javascript,但是这里有一片国内的翻译文章 http://w3ctech.com/p/948 介绍了它。

     

    2.第三方服务解决方案:https://manage.sencha.io/
    他可以以你的图片作为输入,然后返回缩放后的图片。
    有点缺点,比如国外服务器的速度,还得重构标签。

     

    3.(推荐)adaptive-images http://adaptive-images.com/
    非常简单,主页有详细介绍我就不费字码了,推荐使用。


    此外还有:


    01.Picturefill : https://github.com/scottjehl/picturefill
    Picturefill 不做任何带宽检测,是一个JS插件,用添加<span>标签实现,需要大量的自定义标记,所以对于那些不能改变他们的网站的源代码它可能不是最好的选择。

     

    02.Hisrc : https://github.com/teleject/hisrc
    Hisrc 比较有趣,它做带宽检测和视网膜显示器检测,很敬业有木有呵呵。起初你需要为它准备低@lower、中@1、高@2 分辨率图片。当浏览器载入的时候,它采用“移动现行”策略,它首先加载低分辨率图像 @lower——既移动版本。如果连接迅速的较大分辨率,浏览器支持视网膜图像,使用@2x图像。如果连接快速的较大分辨率但视网膜不受支持,那么@1x 图像。
    但它总是先加载低分辨率图像,但是能为了快速链接可以考虑,毕竟现在到了移动现行的时候。

     

    4.艺术指导响应式图片
    有了响应式图片解决方案也未必完美。你确实把图片大小给缩小了,使得下载快速了,可是小屏幕手机用户可能看不清缩小后的图片主体,或者图片的视觉影响力骤然不足。你可能需要在小屏幕上让图片主体或中心,用剪裁或放大变得突出一些,甚至需要旋转。
    http://www.resrc.it/ 可以满足一些需求。

    还有太多方法,准备给自己做个wordpress博客实际应用一下。这种东西工作中根本用不上。

     

    原文:https://medium.com/@streetevens/884556e03b31

     

    展开全文
  • 响应式背景图片的几种方法

    千次阅读 2017-08-20 18:56:25
    响应式背景图片的几种方法总结
  • 响应式图片

    2019-09-16 11:06:45
    利用类名响应式图片 &amp;lt;img src=&quot;test.png&quot; class=&quot;img-responsive&quot; alt=&quot;&quot;&amp;gt; 响应式类的具体做法: .img-responsive { di
  • 加载网页时,平均 60% 以上的流量都来加载图片。HTML 中 img 元素很强大,它可下载、解码然后渲染内容,而现代浏览器支持众多图像格式。跨设备使用图像与桌面端并无太大区别,只需做一些微小调.
  • 图片响应式

    2019-04-05 07:32:33
    img-responsive 编辑 本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧...应用这个样式以后,图片就会变成响应式图片。 中文名 图片响应式 外文名 img responsive 常见 Bootstrap中内置样式...
  • 响应式图像--图片自适应大小

    万次阅读 2016-09-08 10:46:17
    之前在做图片自适应的时候想到的办法是把图片作为背景然后添加background-size:100%;让图片填满整个盒子的方式来实现,但这样图片会根据盒子的大小拉伸,导致显示变形,bootstrap中有很好的解决方法: 响应式...
  • Bootstrap 样式之 响应式图片的处理

    万次阅读 2018-03-07 15:32:48
    在实际的开发过程中,利用Bootstrap 制作响应式网站,很多时候会涉及到图片的处理问题,也就是图片的缩放问题,我们先来看看自然情况下的图片显示:(测试版本 3.x)情景:假设我们在一个 div 中放置一张图片,div ...
  • web前端开发之几种布局方式之响应式布局

    万次阅读 多人点赞 2016-10-09 11:09:20
    一理解几种布局的概念 1、静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;  意思就是不管浏览器尺寸具体是多少,网页布局就...
  • 今天为大家介绍的是一个名为SlidesJS的响应式图片轮播展示的插件,他拥有触摸和CSS3动画过渡的特性。  概述特性:  1.响应式。能够动态创建出适合任何一种屏幕的图片展示效果。  2.触摸。能够支持触摸...
  • Tips:本文主要介绍CSS3的background-size属性,实现响应式式图片等比例缩放。 (一)基本语法 基本语法:background-size: length | percentage | cover | contain; (可参照w3c的为准) length 该属性值是...
  • 如何让图片按比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是把img宽度设为...
  • web前端响应式设计总结

    万次阅读 2017-08-30 10:20:51
    web前端响应式设计总结 一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈...
  • 响应式布局的实现方法和原理

    万次阅读 2018-01-02 18:05:26
    昨天我在马海祥博客上跟大家详细的介绍过《什么是响应式网页设计?》,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平板,手机)...
  • 响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必须掌握。...
  • HTML之meta&&响应式布局

    千次阅读 2017-03-09 15:45:11
    meta属性主要分为两组 1.name属性与content属性 name属性用于描述网页,它是以名称/值形式的名称,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,...
  • 其实自适应更专业的说法是响应式网站。在2010年5月,Ethan Marcotte提出的响应式网站的概念,通俗的说,就是一个网站可以兼容不同的终端,不用为每个分辨率设备做一个特定的版本的网站。近年来,各种大屏幕移动设备...
  • HTML5+CSS3基础响应式页面布局

    万次阅读 2018-01-08 18:20:46
    此时,一个全新的概念—响应式布局应运而生。它的诞生为我们的移动端布局带来了很大的便利。因此学习响应式页面布局势在必行! 一、响应式页面布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个...
1 2 3 4 5 ... 20
收藏数 93,031
精华内容 37,212
关键字:

响应式图片