设置宽高比在很多时候是有用的。

下面的栗子,我们设置一个容器的宽高比为16:9

//HTML代码片段
<div class="container">
<div class="wrapper">
<div class="content">content</div>
</div>
</div>
//css 代码
div{
border: 1px solid green;
}
      .container{ width:400px; }
            .wrapper{
position:relative;
padding-top:25px;
padding-bottom:56.25%; // 16/9 = 0.5625;
height:0;
border: 1px solid red;
}
.content{
position:absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background:gray;
}

我们看到先设置.container容器宽度为400.这个值可以使任意的宽度,也可以是一个百分比。

.wrapper容器设置了 padding-bottom为56.25% 。 这个百分比是16/9的值,这里设置padding-bottom为父容器.container的宽度的百分之56.25.

另外。设置padding-top 为25px,这里在实际中也比较有用。 比如我们要设置一个视频播放器播放界面的宽高比为16:9。我们还希望播放界面上面留下25px的高度来放置播放控制的按钮。

通过padding-bottom和padding-top撑起了.wrapper容器的高度。并且设置height为0;

接下来是.comtent元素。我们设置这个元素绝对定位。top:0,left:0; width:100%;height:100%;因为它的父元素.wrapper的宽度和高度已经成比例了,所以使用width:100%;height:100%;就让content容器达到目的了。通过改变.container的宽度,.content元素的高宽也能成比例的改变。

结果

.container元素--盒模型

.wrapper元素--盒模型

.content元素--盒模型

这里.container元素的宽度可以使用百分比来设置,这在很多时候非常有用。

get新技能: 如何设置元素高度与宽度成特定比例。宽度改变,高度自动按比例改变。 例如设置宽高比16:9。的更多相关文章

  1. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  2. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  3. JQuery_DOM 简介/设置元素及内容

    一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...

  4. 5332盛照宗 如何获取新技能+c语言学习调查

    如何获取新技能+c语言学习调查 你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...

  5. HTML5初步——新的表单元素和属性

    HTML5初步--新的表单元素和属性 HTML5初步--新的表单元素和属性 <!DOCTYPE html> <html> <head> <meta chars ...

  6. 使用 CSS3 的 box-sizing 属性设置元素大小包含 border 与 padding

    Ø  默认情况下,内部元素(如:input)的宽度或高度,是不会包含元素的边框和内边距的,这时就需要使用 box-sizing 属性设置该元素. Ø  box-sizing 是 CSS3 的属性,可以 ...

  7. 20155332 如何获取新技能+c语言学习调查

    如何获取新技能+c语言学习调查 你有什么技能比大多人(超过90%以上)更好? 如果问我有没有什么技能比大多数人,并且是90%的人好,我还真不敢说有,因为世界上有70亿人,要比63亿人做的好才行啊.我也 ...

  8. javascript 设置元素滚动大小

    3. 滚动大小 最后要介绍的是滚动大小(scroll dimension),指的是包含滚动内容的元素的大小. 有些元素(例如 元素),即使没有执行任何代码也能自动地添加滚动条:但另外一些元素,则需要通 ...

  9. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

随机推荐

  1. Java输入、输入、IO流 类层次关系梳理

    本文主要关注在Java编程中涉及到的IO相关的类库.方法.以及对各个层次(抽线.接口继承)的流之间的关系进行梳理 相关学习资料 http://baike.baidu.com/view/1007958. ...

  2. MySQL登录报错&quot;Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: YES)&quot;

    最近登录MySQL时候总报错: # mysql -uroot -p Enter password: ERROR (): Access denied for user 'root'@'localhost ...

  3. Java中四大代码块的执行顺序(附code)

    验证证的方法是写code,如下: public class test { static class A { public static String name = "hello"; ...

  4. 前端UI框架总结

    H-ui 前端框架 架起设计与后端的桥梁轻量级前端框架,简单免费,兼容性好,服务中国网站. 官网:http://www.h-ui.net/H-ui.admin.shtml github下载:https ...

  5. 2_C语言中的数据类型 (九)数组

    1          数组 1.1       一维数组定义与使用 int array[10];//定义一个一维数组,名字叫array,一共有10个元素,每个元素都是int类型的 array[0] = ...

  6. 记一次 java 连接 linux ssh服务 权限验证失败的原因和解决过程

    下面的问题我是通过之前的ssh测试类找出原因的,因为我的测试类跑通了,但是程序跑不通,看了一下源码发现还有一处没有进行解密,所以才会权限验证失败. // 出现权限验证失败的原因就在这里,因为老板要求对 ...

  7. Selenium上传文件

    selenium自带了对应的API可以上传问题,如果这个上传文件的html code中显示的type是file那么你就可以使用下面的代码上传文件. /** * click the upload but ...

  8. Md5 util

    Md5PasswordEncoder.java http://docs.spring.io/spring-security/site/docs/3.0.x/apidocs/org/springfram ...

  9. STL容器基本功能与分类

    STL有7中容器. 分别为: vector 向量 <vector>(头文件) 随机访问容器.顺序容器 deque 双端队列 <deque> 随机访问容器.顺序容器 list   ...

  10. JAVA程序编写入门

    在任意文件夹下创建一个文本,然后重命名,把文本后缀名改为.java.然后用eclipse打开此文件编写程序内容. public class nihao{ public static void main ...