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. 51Nod 1002 数塔取数问题

    Input示例 4 5 8 4 3 6 9 7 2 9 5 Output示例 28 DP: 递推式: dp[i][j]=max(dp[i+1][j],dp[i+1][j+1])+arr[i][j]; ...

  2. PHP系统编程--02.PHP守护进程化

    什么是守护进程? 一个守护进程通常补认为是一个不对终端进行控制的后台任务.它有三个很显著的特征:在后台运行,与启动他的进程脱离,无须控制终端.常用的实现方式是fork() -> setsid() ...

  3. web版canvas做飞机大战游戏 总结

    唠唠:两天的时间跟着做了个飞机大战的游戏,感觉做游戏挺好的.说是用html5做,发现全都是js.说js里一切皆为对象,写的最多的还是函数,都是函数调用.对这两天的代码做个总结,希望路过的大神指点一下, ...

  4. 【hdu5217-括号序列】线段树

    题意:给一串括号,有2个操作,1.翻转某个括号.2.查询某段区间内化简后第k个括号是在原序列中的位置.1 ≤ N,Q ≤ 200000. 题解: 可以知道,化简后的序列一定是)))((((这种形式的. ...

  5. Yii2实现读写分离（MySQL主从数据库）

    读写分离(Read/Write Splitting). 1.原理: 让主数据库(master)处理事务性增.改.删操作(INSERT.UPDATE.DELETE),而从数据库(slave)处理SELE ...

  6. css纯样式导航

    <style>.dropdown {    position: relative;    display: inline-block;} .dropdown-content {    di ...

  7. OnLoad & DOMReady

    window.onload 事件会在页面或图像加载完成后立即触发(即所有元素的资源都下载完毕).如果页面上有许多图片.音乐或falsh,onload事件会迟迟无法触发.所以出现了DOM Ready事件 ...

  8. ”未能加载文件或程序集“Oracle.DataAccess”或它的某一个依赖项

    引用:http://www.cnblogs.com/joey0210/archive/2012/09/29/2708420.html 上一篇文章说到了DLL引用问题,主要是说的程序中如果使用过了反射, ...

  9. JS中Unix时间戳转换日期格式

    <!doctype html> <html> <head> <title>Unix时间戳转换成日期格式</title> <script ...

  10. 单文件组件（single-file components）

    介绍 我们可以使用预处理器来构建简洁和功能更丰富的组件,比如 Pug,Babel (with ES2015 modules),和 Stylus.