CSS中有一个属性 padding对元素宽度存在依存关系。如果一个元素的 padding属性以百分比形式表示，padding 的大小是以该元素包含块宽度为参照的（包含块传送门）。

若想要元素尺寸变化时，宽高比例不变，可以将height 设为0，padding 撑开盒子高度，达到宽高比例不变的效果。

代码如下：

<!DOCTYPE html>

<html>

<head>

<title>demo</title>

<style type="text/css">

*{

    padding: 0;

    margin: 0;

}

html,body{

    background: #0a265e;

    height: 100%;

}

.box{

    width: 80%;

    height: 500px;

    background: red;

}

.children{

    width: 80%;

    height: 0;

    padding-bottom: 30%;

    background-color: #008b57;

}

</style>

</head>

<body>

<div class="box">

    <div class="children"></div>

</div>

</body>

</html>

使用CSS让元素尺寸缩小时保持宽高比例一致的更多相关文章

  1. jQuery的1.x版本的$(element).css()设置元素字体颜色时出现的问题（在IE8以下）

    最近赶项目,自己写了个基于jQuery的弹出层插件,中间遇到一个问题,怎么也找不到解决方法,最后发现就是空格的问题...欲哭无泪啊... 在给函数传参时,因为写css代码时习惯在:后面加个空格在写样式 ...

  2. css scale 元素放大缩小效果

    <style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...

  3. 【转载】图片 CSS：怎样才能 “响应式 + 固定宽高比例”？

    自己根据项目需要,把代码摘了出来 <div class="img-box"></div> .img-box{ height:0; padding-botto ...

  4. CSS 高级：尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  5. css实现盒尺寸重置、均匀分布的子元素、截断文本

    盒尺寸重置 重置盒子模型,以便width s和height s并没有受到border 还是padding他们的影响 . CSS文字折断 css实现盒尺寸重置.均匀分布的子元素.截断文本 如何对多行文本 ...

  6. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  7. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  8. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  9. CSS基础3——使用CSS格式化元素内容的字体

    1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位 绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...

随机推荐

  1. poj 3376 Finding Palindromes

    Finding Palindromes http://poj.org/problem?id=3376 Time Limit: 10000MS   Memory Limit: 262144K       ...

  2. elasticsearch中Node的创建

    要连接到集群,首先要告诉集群:你是谁,你有什么特征.在es中体现为实例化节点,elasticsearch通过org.elasticsearch.node.NodeBuilder的build()或者no ...

  3. Item 11 谨慎地覆盖Clone

    1.进行浅拷贝时,只是复制原始数据类型的值,则可以通过覆盖Clone方法来达到.另外,在进行浅拷贝的时候,还要注意,成员对象中不应该要有引用类型,如果有引用类型,那么,进行了浅拷贝之后,两个对象将会共 ...

  4. 【BZOJ】1774: [Usaco2009 Dec]Toll 过路费

    [题意]给定无向图,距离定义为边权和+最大点权,询问若干个两点最短距离.n<=250. [算法]排序+floyd [题解]考虑floyd的过程是每次找一个中转点,为了在当前找到一条新路径时方便地 ...

  5. 2、MySQL常见数据库引擎及比较？

    MySQL存储引擎简介 MySQL支持数个存储引擎作为对不同表的类型的处理器.MySQL存储引擎包括处理事务安全表的引擎和处理非事务安全表的引擎: MyISAM管理非事务表.它提供高速存储和检索,以及 ...

  6. elementui input样式覆盖 头部小图等

    .nav-right >>> .keywords .el-input__inner { -webkit-appearance: none; background-color: #F3 ...

  7. vue数组操作不触发前端重新渲染

    暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决. 此外,能够监听的数组变异方法 https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC% ...

  8. Android控件——TextView，EditText

    TextView: 显示文本控件 EditText 输入文本框 1.TextView常用属性:

  9. Coursera助学金申请模板

    讲真,我觉得coursera的课还挺贵的.但是它有助学金系统,非常对我们穷学生友好了,而且基本上申请的都会批.不过现在助学金需要15个工作日才有答复,所以注意要提前申请. 有两大段要填. 虽然写的挺烂 ...

  10. C++学习之路（八）：关于C++提供的强制类型转换

    C语言中提供了旧式的强制类型转换方法.比如: int a  =1; char *p = (char *)&a; 上述将a的地址单元强制转换为char类型的指针.这里暂且不说上述转换结果是否合理 ...