龙都娱乐»HTML/CSS»纯CSS(无 JavaScript)实现的响应式图像显示

纯CSS(无 JavaScript)实现的响应式图像显示

来源:oschina 发布时间:2013-10-24 阅读次数:
  有许多方法可以实现web页面里图像的应答。然而,我碰到的所有方案都使用了JavaScript。这使我疑惑不用JavaScript实现图像响应是否可行。   我提出了下面纯CSS的方案。

  它是如何工作的呢?

  我把<img>标签防止在<span>内。src属性将从服务器获得手机版本的图像。接着我还在<span>元素内部包含了一点CSS。   什么??HTML文档中能嵌入了CSS?   是的,只要你增加了scoped属性,这就在HTML5里就是非常有效的。在这个CSS里,我从某个断点开始用了@media查询把作为背景的高清图像添加到<span>里。 在下面这段代码里,我只添加了一个断点,然而你当然可以按你喜欢的增加许多。   通过使用背景图像指示符,只有在需要的时候才会从服务器获取这个图像。也就是说,只有在media查询满足的时候才能获取到。<img>将确保<span>有正确的高宽比,这样<span>上的背景图像才能得到正确的现实。

  代码展示

  下面是可以运行的所有代码。

  HTML

  首先看HTML。 <span class="magik-responsive-image" id="image-01"> <img src="http://dummyimage.com/200x150/cdcdcd/000/?text=lo-res" alt="TODO"> <style scoped> @media screen and (min-width: 701px){#image-01{background-image:url(http://dummyimage.com/1600x1200/dcdcdc/000/?text=hi-res);}} </style> </span>   CSS 我们还需要对CSS最一点修改,以便在应当显示高清图像的时候隐藏低清晰度的图像。技巧是增加backgroud-size:100%;这使得在维护高宽比不变的情况下伸展背景。 .magik-responsive-image { background-repeat: no-repeat; background-size: 100%; display: block; position: relative; } .magik-responsive-image img { max-width: 100%; } @media screen and (min-width: 701px) { .magik-responsive-image img{ opacity: 0; } }

  好处

  1. 没有JavaScript
  2. 实现起来简单
  3. 还可用于视频(我将在以后的博客文章中发表有关这方面的内容)

  缺点

  1. 在桌面环境下,需要向服务器发送两个请求
  2. <style>标签的scoped睡醒在主要的浏览器里仍然没有得到支持。正是由于这个原因,我们才需要增加一个id,不过在后端代码中增加这通常不是问题。

  演示

  看看 这个展示   原文地址:pure-css-responsive-images-yes-javascript
QQ群:WEB龙都娱乐官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈龙都娱乐中心(fsder-com)
网友评论(共2条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共2条评论
登录会员中心
龙都娱乐