使用CSS让元素尺寸缩小时保持宽高比例一致
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让元素尺寸缩小时保持宽高比例一致的更多相关文章
- jQuery的1.x版本的$(element).css()设置元素字体颜色时出现的问题（在IE8以下）
最近赶项目,自己写了个基于jQuery的弹出层插件,中间遇到一个问题,怎么也找不到解决方法,最后发现就是空格的问题...欲哭无泪啊... 在给函数传参时,因为写css代码时习惯在:后面加个空格在写样式 ...
- css scale 元素放大缩小效果
<style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...
- 【转载】图片 CSS：怎样才能 “响应式 + 固定宽高比例”？
自己根据项目需要,把代码摘了出来 <div class="img-box"></div> .img-box{ height:0; padding-botto ...
- CSS 高级：尺寸、分类、伪类、伪元素
CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...
- css实现盒尺寸重置、均匀分布的子元素、截断文本
盒尺寸重置 重置盒子模型,以便width s和height s并没有受到border 还是padding他们的影响 . CSS文字折断 css实现盒尺寸重置.均匀分布的子元素.截断文本 如何对多行文本 ...
- CSS HTML元素布局及Display属性
本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- 深入学习jQuery元素尺寸和位置操作
× 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...
- CSS基础3——使用CSS格式化元素内容的字体
1.CSS属性单位: (1)长度单位:包含绝对长度单位和相对长度单位 绝对长度单位包含:cm.mm.in.pt.pc等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...
随机推荐
- JavaScript字符串、数组操作总结一
1.将数组转换成字符串 例子: var arr=[1,2,3,4,5,6]; var str=arr.join('|'); str输出为 “1|2|3|4|5|6” 2.数组indexOf()方法 ...
- ECMAScript5中新增的Array方法实例详解
ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法.(注意兼容性) 在ES5中,一共有9个Array方法:http://kangax.githu ...
- 【bzoj2038-小z的袜子】莫队算法
莫队例题. 莫队学习:https://www.cnblogs.com/Paul-Guderian/p/6933799.html 本题 分子是sigma(c(sum[a[i]],2)),分母是sigma ...
- PHP 练习1：新闻发布
1.新闻发布主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- POJ 2991 Crane （线段树）
题目链接 Description ACM has bought a new crane (crane -- jeřáb) . The crane consists of n segments of v ...
- HDU 1114 Piggy-Bank （dp）
题目链接 Problem Description Before ACM can do anything, a budget must be prepared and the necessary fin ...
- SD卡 模拟SPI总线控制流程
SD卡为移动设备提供了安全的,大容量存储解决方法.它本身可以通过两种总线模式和MCU进行数据传输,一种是称为SD BUS的4位串行数据模式,另一种就是大家熟知的4线SPI Bus模式.一些廉价,低端的 ...
- gpio子系统和pinctrl子系统（下）
情景分析 打算从两个角度来情景分析,先从bsp驱动工程师的角度,然后是驱动工程师的角度,下面以三星s3c6410 Pinctrl-samsung.c为例看看pinctrl输入参数的初始化过程(最开始的 ...
- Linux内核通知链分析【转】
转自:http://www.cnblogs.com/jason-lu/articles/2807758.html Linux内核通知链分析 1. 引言 Linux是单内核架构(monolithic k ...
- mysql 1366的错误 字符集错误解决方案
最近用mysqlalchmy的时候遇到了 sqlalchemy.exc.InternalError: (pymysql.err.InternalError) (1366, "Incorrec ...