svg图片自适应div容器大小
2016-02-24 14:18
387 查看
http://thenewcode.com/744/Make-SVG-Responsive
可以尝试去改变svg-container的width属性,里面的图片会自适应哦!具体原理在慢慢探究吧
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <title>监控视图</title> <style type="text/css"> .svg-container { display: inline-block; position: relative; width: 100%; padding-bottom: 100%; vertical-align: middle; overflow: hidden; } </style> </head> <body> <div class="svg-container"> <svg version="1.1" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet" class="svg-content"> <circle fill="#F7941E" stroke="#231F20" stroke-width="10" stroke-miterlimit="10" cx="250" cy="250" r="200" opacity="0.6" /> </svg> </div> </body> </html>
可以尝试去改变svg-container的width属性,里面的图片会自适应哦!具体原理在慢慢探究吧
相关文章推荐
- Nudnik Photographer -Ural1260动态规划
- TOMCAT源码导入eclipse
- vim 常用命令
- Javascript中的特殊变量
- 《蒋勋说宋词》 读后感
- jquery的ajax同步和异步
- 理解LinkedHashMap
- Hadoop-1.2.1 Eclipse开发环境配置
- UIBezierPath精讲
- HDU5631(并查集)
- Android之项目全局变量的定义
- PAT (Basic Level)1017. A除以B
- Java动态代理、cglib动态代理
- linux 下 apache启动、停止、重启命令
- 同时启动两个jboss端口提示占用问题
- 对待开源的态度
- freemarker切割字符串长度
- Unity 5.X扩展编辑器之打包assetbundle
- Unity 5.X扩展编辑器之打包assetbundle
- redis服务器初始化化