零基础建站培训介绍

当前位置:

img元素srcset属性含义及作用

在学习如何做网站时,网站中会有图片,图片使用HTML img 图片标签,img元素中有一个很少用的属于-srcset属性。img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。例如:


<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ,达到 1400px 则加载 big.jpg。注意:像素密度描述只对固定宽度图片有效。

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式:媒体查询 宽度描述(支持px),多条规则用逗号分隔。


<img src="images/gun.png"
         srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
         sizes="(max-width: 320px) 300w, 1200w"/>

上面的例子表示浏览器视口为 320px 时图片宽度为 300px,其他情况为 1200px。

css image-set()

css属性image-set()支持根据用户分辨率适配图像。


body {
    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);
}

上述代码将会为普通屏幕使用 pic-1.jpg,为高分屏使用 pic-2.jpg,如果更高的分辨率则使用 pic-3.jpg,比如印刷。

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 做网站时,避免不了网站上有大量的图片。网站上的图片显示就需要使用img图片标签。HTML img图片标签写法[cce_html]<img src="图片地址" alt=
  • 在学习如何做网站时,网站中会有图片,图片使用HTML img 图片标签,img元素中有一个很少用的属于-srcset属性。img 元素的 srcset 属性用于浏览器根据
  • html元素标签属性大全 (115062 次浏览)
    什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • 问题:在HTML中元素分为块状元素和行内元素,块状元素的外边距和内边距我们分别使用margin\padding属性来设置,那么行内元素可以设置margin\paddi
  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器:
  • 在自己做网站时,为了显示效果,我们需要对某些区块设置圆角边框,这时,我们需要用到CSS的border-radius属性,通过border-radius属性就可以轻松设置
  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • HTML文档Doctype声明含义 (13890 次浏览)
    html网页中,我们经常会看到下面的代码:[cce_html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.
  • Html头部标签含义解释 (15448 次浏览)
    标签描述<head>定义关于文档的信息。<title>定义文档标题。<base>定义页面上所有链接的默认地址
  • HTML5新增标签及含义 (15296 次浏览)
    HTML5较以前的HTML版本,增加了很多的标签:属性值描述autoplayautoplay如果出现该属性,则视频在就绪后马上播放。contr
  • 制作手机版网站的时候,除了页面简洁、操作方便等访问者可以看到的地方以外,就是 Meta 标签的设置,合理设置 Meta 标签 对手机版网站的搜索引擎优化
  • *{margin: 0; padding: 0}的作用*{margin: 0; padding: 0}作用是Reset(重置)浏览器默认样式,对于各浏览器样式统一的话有着简单粗暴的效果。
  • wp_head()是wordpress的一个特别重要的函数,基本上所有的主题在header.php这个文件里都会使用到这个函数。而且很多插件为了在header上加点东西也