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. Eclipse srever起来时，时间超过45s。

    双击servere的名字,在属性界面上进行修改. 如下图: 修改TimeOut中的值即可.

  2. IIS---HTTP 错误 500.19 - Internal Server Error 的解决方法

    在验证IIS是否安装成功,测试了一个页面,报500.19错误 感谢:http://www.cnblogs.com/imjustice/archive/2011/04/04/2198116.html 图 ...

  3. mysql 高级应用

    1.MySQL like 模糊查询 例如:select * from emp where name like '张%'; 2.1MySQL UNION 操作符 SELECT country FROM ...

  4. 天气预报service

    https://weather.com/ https://api.weather.com/v2/turbo/vt1dailyForecast?apiKey=c1ea9f47f6a88b9acb43ab ...

  5. debussy与modelsim的联调设置

    前段时间看到网上有人在使用debussy软件对Verilog代码进行调试,而且都称赞其是多么的好用,看着很是馋人,说吧,现在用的是quartus与modelsim的联调,似乎还是可以的,但就是每次稍微 ...

  6. 【51NOD】1096 距离之和最小

    [算法]数学 [题解] 其实就是求中位数,奇数个点就是最中间的点,偶数个点就是最中间两个点和它们之间的区域皆可(所以偶数不必取到两点正中央,取两点任意一点即可). 我们可以想象现在x轴上有n个点,我们 ...

  7. 关于Solaris系统“mpt_sas”驱动

    1.mpt_sas 驱动源文件所在系统源代码中目录: illumos-soulos/usr/src/uts/common/sys/scsi/adapters/mpt_sas  -- 头文件 illum ...

  8. Tornado 安装及简单程序示例

    1.安装步骤:tar xvzf tornado-3.2.tar.gz cd tornado-3.2 python setup.py build sudo python setup.py install ...

  9. 【1】记一次破解wifi

    当然,使用的依旧是aircrack套件,这次依旧是跑字典,今天,捉到了另一个实验室icephone的wpa握手包,我猜测实验室的wifi一般都跟自己的名字有关,icephone刚好是8位字母,于是我就 ...

  10. js/jq 键盘上下左右回车按键

    js判断上下左右回车按键: document.onkeydown=function(e){ e=window.event||e; switch(e.keyCode){ case 37: //左键 co ...