css样式： 宽高按一定比例进行自适应
纯 CSS 实现高度与宽度成比例的效果
item 元素的 CSS 定义如下：
.item {
float: left;
margin: 10px 2%;
width: 21%;
}
这时遇到的一个需求：在保持 item 元素宽高比恒定（如高是宽的 1.618 倍）的情况下，使得 item 元素可以和父元素同比缩放。 我们知道，如果当 item 元素是图片，同时需要保持的宽高比恰好为图片本身的宽高比时，可以设置 item 的 height 为 auto 即可轻松实现这个需求。然而当 item 元素不是图片或者要保持的宽高比和图片本身的宽高比不同时，这个需求显得很难直接用 CSS 实现。
为此我放弃 CSS，直接用 JavaScript 绑定 window 的 onresize 事件来动态获取每个 item 的宽度，从而计算并设置其高度。
我一直在使用这个解决方案，直到今天调整样式时，突然想到这个需求竟然是可以只使用 CSS 解决的。
首先需要知道，一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，即使对于 padding-bottom 和 padding-top 也是如此。
另外，在计算 Overflow 时，是将元素的内容区域（即 width / height 对应的区域）和 Padding 区域一起计算的。换句话说，即使将元素的 overflow 设置为 hidden，“溢出”到 Padding 区域的内容也会照常显示。
综上两条所述，我们可以使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果。因为 item 元素的宽度是其父元素宽度的 21%，所以我们将 padding-bottom 设置为它的 1.618 倍，即 33.98%。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值，从而实现需要的效果。
最后 item 元素的 CSS 样式为：
.item {
float: left;
margin: 10px 5%;
padding-bottom: 33.98%;
width: 21%;
height: 0;
}
页面效果见 http://jsfiddle.net/luin/25BbH/7/，拖动窗口调整页面宽度，item 元素始终保持恒定的宽高比。
具体快去http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/了解，同时感谢楼主的分享。
demo:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="aaa" style="width:80%;height:0;padding-bottom: 45%;margin: 0 auto;"> <img src="../style/img/login_bg1.jpg"/ style="width:100%;"> </div> </body></html> |
css样式： 宽高按一定比例进行自适应的更多相关文章
- 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...
- 前端之css（宽高）设置小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
- css未知宽高的盒子div居中的多种方法
不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...
- CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...
- CSS实现宽高成比例缩放
用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢. html代 ...
- css固定宽高DIV内部元素垂直居中的方法
应用案例 案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的.很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定 ...
- 百度地图设置div样式宽高为百分比不显示地图
如题,不显示地图只要在样式代码里面加以 position:absolute; 代码就可以了 <style type="text/css"> body, html,#al ...
- nopi使用 设置列样式 宽高 设置分页符
HSSFWorkbook book = new HSSFWorkbook(); ISheet sheet = book.CreateSheet("test_01"); sheet. ...
- JS获取盒模型对应的宽高
## 获取内联样式宽高 只能获取内联设置的样式,在style或者.css文件中设置的无法获取 let div = document.querySelect('.test'); let width = ...
随机推荐
- hive的查询注意事项以及优化总结 .
Hive是将符合SQL语法的字符串解析生成可以在Hadoop上执行的MapReduce的工具.使用Hive尽量按照分布式计算的一些特点来设计sql,和传统关系型数据库有区别, 所以需要去掉原有关系型数 ...
- C#获取电脑硬件信息（CPU ID、主板ID、硬盘ID、BIOS编号）
最近学习过程中,想到提取系统硬件信息做一些验证,故而对网上提到的利用.NET System.Management类获取硬件信息做了进一步的学习.验证.验证是分别在4台电脑,XP SP3系统中进行,特将 ...
- ZooKeeper系列（2） 安装部署 （转）
原文地址:http://www.cnblogs.com/wuxl360/p/5817489.html 一.Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模 ...
- while_else
使用while循环输出100-50,从大到小,到50的时候,再从0到50输出,然后结束count =
- 微软&中科大提出新型自动神经架构设计方法NAO
近期,来自微软和中国科学技术大学的刘铁岩等人发表论文,介绍了一种新型自动神经架构设计方法 NAO,该方法由三个部分组成:编码器.预测器和解码器.实验证明,该方法所发现的架构在 CIFAR-10 上的图 ...
- Python：23种Pandas核心操作
Pandas 是一个 Python 软件库,它提供了大量能使我们快速便捷地处理数据的函数和方法.一般而言,Pandas 是使 Python 成为强大而高效的数据分析环境的重要因素之一.在本文中,作者从 ...
- APIView (DRF的视图)
APIView和View的区别 -- APIView继承了View -- APIView 重写了as_view以及 dispatch方法 -- 在dispatch里重新封装了request -- r ...
- uva-208-枚举-并查集
题意: 给你一个图,从1到指点的点有多少种不同的路径,用了并查集剪枝,如果当前节点的根不是指定的节点,直接返回,会超时 time limit了俩次,wa了俩次,PE俩次 #include <io ...
- 《GPU高性能编程CUDA实战》附录一 高级原子操作
▶ 本章介绍了手动实现原子操作.重构了第五章向量点积的过程.核心是通过定义结构Lock及其运算,实现锁定,读写,解锁的过程. ● 章节代码 #include <stdio.h> #incl ...
- zabbix微信报警
[root@LinuxS04 jiaoben]# ./weixin 联系人 baojing baojingok[root@LinuxS04 jiaoben]# pwd/usr/local/zabbix ...