使用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等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...
随机推荐
- WebDriver中如何处理Iframe 及 嵌套Iframe
最近在用webdriver进行爬虫的时候,遇到了网站存在iframe的情况,处理了好久没有解决,后来发现原来webdriver自带处理方法,汗颜.. 1.iFrame有ID 或者 name的情况 // ...
- Spring的使用优点
spring事物配置,声明式事务管理和基于@Transactional注解的使用 spring支持编程式事务管理和声明式事务管理两种方式. 编程式事务管理使用TransactionTemplate或者 ...
- Web Session 浅入浅出（山东数漫江湖）
使用过几种Web App开发语言和框架,都会接触到Session的概念.即使是一个简单站点访问计数的功能,也常常使用Session来实现的.其他常用的领域还有购物车,登录用户等.但是,对Session ...
- Billboard HDU 2795 （线段树）
题目链接 Problem Description At the entrance to the university, there is a huge rectangular billboard of ...
- HH实习 acm算法部 1689
题目描述 这学期到了十五周了,HH突然要去实训中心实习了,想到要拿着钳子,锯子什么的,头就有点大了,因为它挺好玩的,但是,也是很累的,看着学弟坐在机房悠闲地敲着代码,HH学长决定要让他们好好忙忙,这道 ...
- Sqlmap使用教程
sqlmap也是渗透中常用的一个注入工具,其实在注入工具方面,一个sqlmap就足够用了,只要你用的熟,秒杀各种工具,只是一个便捷性问题,sql注入另一方面就是手工党了,这个就另当别论了. 今天把我一 ...
- js中的return
retrun true: 返回正确的处理结果. return false:分会错误的处理结果,终止处理. return:把控制权返回给页面(如果条件满足,后面的逻辑就不执行了). if(this.in ...
- vue点击切换颜色限制个数（用了mui框架）
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- aspxpivotgrid排序
protected virtual void SetSortBySummary() { foreach (PivotGridField field in grid.Fields) { if (fiel ...
- C++变量类型转换
1:int转换为CString CString str; str.Format("As string: %d", int); 2:double转换为CString CString ...