使用纯 CSS 实现响应式的图片显示效果
2024-09-26 16:32:32
有许多方法可以实现页面里图像的响应式显示(Responsive)。然而,我碰到的所有方案都使用了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
本文链接:http://www.cnblogs.com/oooweb/p/css-responsive-image-layout.html
最新文章
- jquery numberbox赋值
- hiho #1329 : 平衡树&#183;Splay
- 基于eclipse-java的平台上搭建安卓开发环境
- 对Java中字符串的进一步理解
- VS2010远程调试
- js实时监听input中值的变化
- ssd可以用作redo 盘吗?
- ligerUI调用$.ligerDialog.open弹出窗口,关闭后无法获取焦点问题
- Python 常用模块大全(整理)
- Python3环境搭建
- 用golang chromedp 操作已经打开的chrome浏览器
- js传递数组
- selenium基础用法(爬虫)
- wepy里面两种不同的写回调函数的方法
- Java的首次学习和了解
- C++高性能转换大小写算法
- 【 总结 】crontab 使用脚本及直接获取HTTP状态码
- 常规DLL与扩展DLL区别
- C#控件之TreeView
- HDU3572Task Schedule(最大流 ISAP比較快)建图方法不错
热门文章
- 缓存-System.Web.Caching.Cache
- lintcode-512-解码方法
- [并查集] How Many Tables
- 第6题 ZigZag转换
- MVC 中创建自己的异常处理
- HDU2486_A simple stone game
- Codeforces 618D Hamiltonian Spanning Tree(树的最小路径覆盖)
- BZOJ 1565 植物大战僵尸(拓扑排序+最大权闭合子图)
- 【数据库_Mysql】MySQL动态语句 if set choose where foreach trim
- css基于文件格式使用不同的样式