使用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等. 绝对长度单位最好用于打印输出设备.在仅作为频幕显示时.绝对长度值并没有什么意义 ...
随机推荐
- Ubuntu12.04 安装LAMP及phpmyadmin
1.安装 Apache apt-get install apache2 2.安装 PHP5 apt-get install php5 libapache2-mod-php5 3.安装 MySQL ap ...
- jmeter进行http压力测试（图文小教程）
下载地址:http://jmeter.apache.org/download_jmeter.cgi JMeter基于Java开发,需要系统有安装JDK环境.解压后进入bin目录,点击jmeter.ba ...
- Redis 模糊匹配 SearchKeys
语法:KEYS pattern说明:返回与指定模式相匹配的所用的keys.该命令所支持的匹配模式如下:(1)?:用于匹配单个字符.例如,h?llo可以匹配hello.hallo和hxllo等:(2)* ...
- Java堆内存Heap与非堆内存Non-Heap
堆(Heap)和非堆(Non-heap)内存 按照官方的说法:“Java 虚拟机具有一个堆,堆是运行时数据区域,所有类实例和数组的内存均从此处分配.堆是在 Java 虚拟机启动时创建的.”“在 ...
- nginx与php-fpm通讯方式
nginx和php-fpm的通信方式有两种,一种是tcp socket的方式,一种是unix socke方式. tcp sockettcp socket的优点是可以跨服务器,当nginx和php-fp ...
- Linux_信号与信号量【转】
转自:http://blog.csdn.net/sty23122555/article/details/51470949 信号: 信号机制是类UNIX系统中的一种重要的进程间通信手段之一.我们经常使用 ...
- inet_select_addr
当通过输出设备向目的地址发送报文时,如果没有源地址,则需要调用inet_select_addr来选择ip地址作为源地址: /* 选择ip地址 通过设备找到ip控制块,从ip控制块中遍历地址列表中的主地 ...
- python基础===Python 迭代器模块 itertools 简介
本文转自:http://python.jobbole.com/85321/ Python提供了一个非常棒的模块用于创建自定义的迭代器,这个模块就是 itertools.itertools 提供的工具相 ...
- C#ActiveX安装项目
C#开发的ActiveX控件发布方式有三种: 制作客户端安装包,分发给客户机安装: 制作在线安装包,客户机联机安装: 使用html中object的codebase指向安装包地址. 以下为制作安装包: ...
- FineReport——JS二次开发（分页预览）
BS访问某个cpt模板,报表servlet将会将cpt文件解析成对应的html,报表内容最终转换为一个table,位于id=content-container的div中. 在模板和html页面中,他们 ...