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. [LeetCode] 5. Longest Palindromic Substring ☆☆☆☆

    Given a string s, find the longest palindromic substring in s. You may assume that the maximum lengt ...

  2. 杭电多校第七场-J-Sequence

    题目描述 Let us define a sequence as belowYour job is simple, for each task, you should output Fn module ...

  3. python读文件和写入文件复习

    with open("name.txt",'r') as read_file: for name in read_file: list_name = (name.split(',' ...

  4. Divergent Change(发散式变化)---要重构的信号

    “ 当你看着一个类说,呃,如果新加入一个数据库,我必须修改这三个函数:如果新出现一种金融工具,我必须修改这四个函数.那么,此时也许将这个类分成两个会更好,这么一来每个对象就可以只因一种变化而需要修改. ...

  5. Java并发—— 关键字volatile解析

    简述 关键字volatile可以说是Java虚拟机提供的最轻量级的同步机制,当一个变量定义为volatile,它具有内存可见性以及禁止指令重排序两大特性,为了更好地了解volatile关键字,我们可以 ...

  6. 【目录】Python模块学习系列

    目录:Python模块学习笔记 1.Python模块学习 - Paramiko  - 主机管理 2.Python模块学习 - Fileinput - 读取文件 3.Python模块学习 - Confi ...

  7. linux中的tasklet机制【转】

    转自:http://blog.csdn.net/yasin_lee/article/details/12999099 转自: http://www.kerneltravel.net/?p=143 中断 ...

  8. 安全测试===appscan扫描工具介绍

    IBM AppScan该产品是一个领先的 Web 应用安全测试工具,曾以 Watchfire AppScan 的名称享誉业界.Rational AppScan 可自动化 Web 应用的安全漏洞评估工作 ...

  9. 【bzoj3545】peaks

    离线一下,动态开点+线段树合并,然后权值线段树上询问kth即可. #include<bits/stdc++.h> ; *; using namespace std; ; inline in ...

  10. HDU 6146 Pokémon GO DP,计数

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6146 题意:~ 解法:原题..http://blog.csdn.net/y990041769/arti ...