Maintain Aspect Ratio Mixin
2016-07-16 21:54
651 查看
Maintain Aspect Ratio Mixin
Maintain the aspect ratio of a div with CSS
RESPONSIVE ASPECT RATIOS WITH PURE CSS
How to Maintain Image Aspect Ratios in Responsive Web Design
http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties
example code 1
/* * Pure CSS aspect ratio with no spacer images or js! :) */ body { width: 36%; margin: 8px auto; } div.stretchy-wrapper { width: 100%; padding-bottom: 56.25%; /* 16:9 */ position: relative; background: blue; } div.stretchy-wrapper > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; color: white; font-size: 24px; text-align: center; } /* Other aspect ratios to try: * 56.25% = 16:9 * 75% = 4:3 * 66.66% = 3:2 * 62.5% = 8:5 */
<div class="stretchy-wrapper"><div>Resize your browser</div></div>
example 2
<section class="ejemplo"> <h1>Aspect ratios pure Css: widths rule</h1> <h2>Resize the window</h2> <div class="width ratio2-1"> <div class="contenido">Aspect ratio 2:1</div> </div> <div class="width ratio16-9"> <div class="contenido">Aspect ratio 16:9</div> </div> <div class="width ratio4-3"> <div class="contenido">Aspect ratio 4:3</div> </div> <div class="width ratio1-1"> <div class="contenido">Aspect ratio 1:1</div> </div> </section> <p><a href='http://ksesocss.blogspot.com/2013/08/aspect-ratios-css.html'>The post (es-es)</a></p> <p>See the second part: <a href='http://codepen.io/Kseso/pen/rouEi'>when heights rule</a></p>
@import url(http://fonts.googleapis.com/css?family=Dosis:300); * { margin: 0; padding: 0; border: 0 none; position: relative; } html, body { background: #164C88; font-family: Dosis; font-size: 1.1rem; line-height: 1.6; color: #F6FAFD; } body {padding: 1rem;} .ejemplo { text-align: center; } .width { width: 45%; background: #F9D237; position: relative; display: inline-block; margin: 1%; vertical-align: top; box-shadow: 0 0 4px rgba(0,0,0,.3); } .width:before { content: ''; display: block; } .ratio1-1:before {padding-top: 100%;} .ratio2-1:before {padding-top: 50%;} .ratio4-3:before {padding-top: 75%;} .ratio16-9:before {padding-top: 56.25%;} .contenido { position: absolute; top: 0; left: 0; bottom: 0; right: 0; font-size: 1.5rem; color: #444; } a {color: #F9D237}
相关文章推荐
- 在Windows系统搭建.NET Core环境并创建运行ASP.NET网站
- Asp.Net实现FORM认证的一些使用技巧(转)
- 使用ASP.Net WebAPI构建REST服务(二)——路由
- 使用ASP.Net WebAPI构建REST服务(一)——简单的示例
- Use the Raspberry Pi as a DIY Surveillance camera
- Asp.net总结
- (翻译)从底层了解ASP.NET体系结构
- Asp.Net连接Mysql报错Out of sync with server
- asp.net EF 反向工程 CodeFirst 参数错误异常
- 香蕉派 banana pi BPI-M2+ 四核开发板 全志 allwinner H3方案
- asp.net使用mysql数据库
- 菜鸟级三层框架(EF+MVC)项目实战之 系列四 UI层ASP.NET MVC实现CRUD
- .aspx文件和.aspx.cs文件的区别与联系
- .aspx文件和.aspx.cs文件的区别与联系
- ASP.NET MVC进阶之路:深入理解依赖注入(DI)和控制反转(IOC)
- 【Dongle】【牛腩新闻发布系统】ASP无法识别
- ASP汉字转拼音函数的方法
- ASP.NET MVC4 导出Excel问题
- 使用jaspersoft创建jasper模板的经验总结
- ASP.NET MVC路由系统的核心对象介绍