纯CSS(无 JavaScript)实现的响应式图像显示
有许多方法可以实现web页面里图像的应答。然而,我碰到的所有方案都使用了JavaScript。这使我疑惑不用JavaScript实现图像响应是否可行。
我提出了下面纯CSS的方案。
它是如何工作的呢?
我把<img>标签防止在<span>内。src属性将从服务器获得手机版本的图像。接着我还在<span>元素内部包含了一点CSS。
什么??HTML文档中能嵌入了CSS?
是的,只要你增加了scoped属性,这就在HTML5里就是非常有效的。在这个CSS里,我从某个断点开始用了@media查询把作为背景的高清图像添加到<span>里。 在下面这段代码里,我只添加了一个断点,然而你当然可以按你喜欢的增加许多。
通过使用背景图像指示符,只有在需要的时候才会从服务器获取这个图像。也就是说,只有在media查询满足的时候才能获取到。<img>将确保<span>有正确的高宽比,这样<span>上的背景图像才能得到正确的现实。
代码展示
下面是可以运行的所有代码。
HTML
首先看HTML。
1
2
3
4
5
6
|
< span class = "magik-responsive-image" id = "image-01" > < 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%;这使得在维护高宽比不变的情况下伸展背景。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.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 ; } } |
好处
- 没有JavaScript
- 实现起来简单
- 还可用于视频(我将在以后的博客文章中发表有关这方面的内容)
缺点
- 在桌面环境下,需要向服务器发送两个请求
- <style>标签的scoped睡醒在主要的浏览器里仍然没有得到支持。正是由于这个原因,我们才需要增加一个id,不过在后端代码中增加这通常不是问题。
演示
看看 这个展示 。
原文地址:pure-css-responsive-images-yes-javascript
纯CSS(无 JavaScript)实现的响应式图像显示的更多相关文章
- 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单
html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...
- 纯CSS3大转盘抽奖(响应式、可配置)
源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘 ...
- 快速使用CSS Grid布局,实现响应式设计
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...
- CSS Grid布局,实现响应式设计
columns(列) 和 rows(行) 为了使其成为二维的网格容器,我们需要定义列和行.让我们创建3列和2行.我们将使用grid-template-row和grid-template-column属 ...
- 用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
- 纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
- 利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 纯css无js实现点击事件
<input id="A" type="checkbox"><label for="A"> <span cla ...
- 用纯css、JavaScript、jQuery简单的轮播图
完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为 img ...
随机推荐
- git使用点滴:如何查看commit的内容
在push之前有时候会不放心是不是忘记加某些文件,或者是不是多删了个什么东西,这时候希望能够看看上次commit都做了些什么. 一开始想到的是用Git diff,但是git diff用于当前修改尚未c ...
- Django+Nginx+uwsgi搭建自己的博客(七)
上一篇博客中介绍了Blogs App的部分后端功能的实现,在这篇博客中,将继续为大家介绍Blogs App中前端功能的实现. 首先来看发布博客功能的前端页面.在blogs/templates/blog ...
- AFF镜像工具集afflib-tools
AFF镜像工具集afflib-tools Advanced Forensic Format(AFF)是一种开源免费的磁盘镜像格式.作为磁盘数字取证的三大格式之一,AFF提供数字取证的各项功能,如签 ...
- 关于urllib、urllib2爬虫伪装的总结
站在网站管理的角度,如果在同一时间段,大家全部利用爬虫程序对自己的网站进行爬取操作,那么这网站服务器能不能承受这种负荷?肯定不能啊,如果严重超负荷则会时服务器宕机(死机)的,对于一些商业型的网站,宕机 ...
- 深入理解javascript作用域系列第四篇
前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的 ...
- POJ1226 Substrings
后缀数组. 求多个字符串翻转与否中最长公共子串长. 二分答案,反过来多建一倍的字符串,二分时特判一下即可. By:大奕哥 #include<cstring> #include<cst ...
- 51nod1031 骨牌覆盖 组合数学
不难发现,只有$1 * 2, 2 * 2$两种方法 因此,设$f[i]$表示填满$1 - i$的方案数 那么有$f[i] = f[i - 1] + f[i - 2]$,其实就是斐波那契数列.... 复 ...
- 【随机化】【并查集】Gym - 100851J - Jump
题意:交互题,有一个长度为n(偶数)的二进制串,你需要猜不超过n+500次猜到它.如果你猜的串与原串相同的位数为n,那么会返回n,如果为n/2,那么会返回n/2,否则都会返回零. 先random,直到 ...
- Mybatis 删除多条数据XML SQL语句删除
Mybatis 删除多条数据XML SQL语句删除 1.删除多条数据SQL写法 <delete id="deleteParamsByIds"> delete from ...
- system.ComponentModel.Win32Exception (0x80004005): 目录名无效。 解决方法
有时候我们需要在程序中调用 cmd.exe 执行一些命令 比如 我们会在程序写到 /// <summary> /// 执行Cmd命令 /// </summary> /// & ...