【转】纯 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:;
- }
页面效果见 http://jsfiddle.net/luin/25BbH/7/,前面慢的话点这个试试:http://runjs.cn/code/jgbwvyf6。拖动窗口调整页面宽度,item 元素始终保持恒定的宽高比。
同样,这个解决方案也自然支持前文说的“当 item 元素是图片但要保持的宽高比和图片本身的宽高比不同”的情况,具体见我在 Ruby China 上的一篇回复:图片 CSS:怎样才能“响应式+固定宽高比例”?
转自:http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/
【转】纯 CSS 实现高度与宽度成比例的效果的更多相关文章
- 纯 CSS 实现高度与宽度成比例的效果
http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/
- 纯css实现宽度自适应,高度与宽度成比例
html: <div></div> css div{ width: 33.33%; box-sizing: border-box; float: left; position: ...
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。
设置宽高比在很多时候是有用的. 下面的栗子,我们设置一个容器的宽高比为16:9 //HTML代码片段 <div class="container"> <div c ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- CSS实现高度和宽度自适应
其实用绝对定位也可以实现高度和宽度的自适应,从而出现自适应大小的区域及滚动条. <%@ Page Language="C#" AutoEventWireup="tr ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- 使用纯 CSS 实现超酷炫的粘性气泡效果
最近,在 CodePen 上看到这样一个非常有意思的效果: 这个效果的核心难点在于气泡的一种特殊融合效果. 其源代码在:CodePen Demo -- Goey footer,作者主要使用的是 SVG ...
- css实现高度或者宽度不固定的div元素垂直左右居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- data guard switchover切换异常
data guard switchover切换异常 查看DG数据库备份库发现,switchover_status为SWITCHOVER LATENT SQL> select OPEN_MODE, ...
- Microsoft HoloLens 技术解谜(上)
HoloLens 是什么? HoloLens 是微软发布的可穿戴式增强现实计算设备,它拥有这么几个关键要素: 它是增强现实产品,即 Augmented Reality(AR),AR 技术将计算机生成的 ...
- 在Eclipse中安装spket插件
spket是一个开发JavaScript和Ext等的开发工具,它可以 是独立的IDE,也可以作为 Eclipse的插件使用,下面介绍如何在Eclipse中安装spket插件, 1.首先上 官网 htt ...
- python string 文本常量和模版
最近在看python标准库这本书,第一感觉非常厚,第二感觉,里面有很多原来不知道的东西,现在记下来跟大家分享一下. string类是python中最常用的文本处理工具,在python的 ...
- Windows玩转Docker(一):安装
Docker官网地址: http://www.docker.com/ 本文参照site: https://docs.docker.com/windows/ Docker 项目的目标是实现轻量级的操作系 ...
- UValive 5713 Qin Shi Huang's National Road System
Qin Shi Huang's National Road System Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3 ...
- UIAlertView的使用
UIAlertView是用于弹出一个对话框进行选择或者消息提示 构造函数: UIAlertView * alert = [[UIAlertViewalloc] initWithTitle:@& ...
- 【转】SVN linux命令及 windows相关操作(三)
TortoiseSVN是windows下其中一个非常优秀的SVN客户端工具.通过使用它,我们可以可视化的管理我们的版本库.不过由于它只是一个客户端,所以它不能对版本库进行权限管理. TortoiseS ...
- 杭电 1795 The least one
The least one Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- android ROM备份和还原,再也不用当心刷到垃圾ROM,而还原不了原有系统
安卓刷机后如何还原以前ROM 和系统备份,本教程为大家介绍刷机后如何还原到以前的ROM 和系统备份. 很多人,看到了好多新的rom,包括测试版的新rom,心里痒痒的.想刷一刷.尝尝鲜,结果刷完,感觉新 ...