这里先提供一种，有更好的方法再补充。

demo代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>宽高比2:1demo</title>

    <style>

        html,

        body{

            width: 100%;

            height: 100%;

        }

        .content{

            width: 100%;

            height: 0;

            padding-bottom: 50%;

            background-color: red;

        }

    </style>

</head>

<body>

    <div class="content"></div>

</body>

</html>

　　

创建一个宽高成比例的弹性div盒子的更多相关文章

  1. 让自定义view宽高成比例显示

    有时候我们自定义一个View,比如ImageView,我们需要让它宽高按照一定的比例显示,例如在ImageView在GridView中显示,GridView设置了3列,由于ImageVIew的宽度会根 ...

  2. CSS实现宽高成比例缩放

    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢.         html代 ...

  3. css中：如何让一个图片（不知道宽高，宽高可能比父元素div大），在父元素div内部水平垂直居中，并且不溢出父元素div，且图片不拉伸变形（可等比例缩小）？

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  4. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  5. 容器宽高不确定，图片宽高不确定，css如何实现图片响应式？

    图片响应式 在响应式开发中最烦恼的应该就是图片了,虽然图片设置max-width: 100%;可以让图片宽度占满容器,但是高度就不能自适应了.如果将容器高度限死,那么我们就要使用媒体查询来控制容器的高 ...

  6. css 宽高自适应的div 元素 如何居中 垂直居中

    在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...

  7. 怎样创建一个canvas画布环境

    1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> < ...

  8. Padding和父子继承宽高之间的关系

    1.父子之间宽高的继承关系 父亲有一个宽高,儿子若不设定宽高会继承,继承宽的100%,高度靠自己内容撑开. 2.padding对儿子宽的影响 看代码: <style> .father{ w ...

  9. 【Flutter学习】页面布局之宽高尺寸处理

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

随机推荐

  1. Spring装配bean（在java中进行显式配置）

    1.简单介绍 Spring提供了三种装配机制: 1.在XML中进行显式配置: 2.在java中进行显式配置: 3.隐式的bean发现机制和自动装配. 其中,1和3项在项目中经常使用,而在java中进行 ...

  2. 获取子元素节点(children,childNodes)

    在js中获取元素节点有DOM对应的方法如getElementsByTagName()等等..对于获取子元素还有另外一种获取方法ChildNodes 不过ChidNodes在高级浏览器除(IE6-8)里 ...

  3. Ansible--常用模块使用

    ansible命令解释 通过ansible命令执⾏的任务称为ad-hoc命令(任务),其实它是相对playbook⽽⾔的.通常,命令⾏⽤来实现ansible的批量管理功能,playbook⽤来实现批量 ...

  4. loadrunner 脚本开发-调用java jar文件远程操作Oracle数据库测试

    调用java jar文件远程操作Oracle数据库测试 by:授客 QQ:1033553122 测试环境 数据库:linux 下Oracle_11g_R2 Loadrunner:11 备注:想学ora ...

  5. 《Inside C#》笔记(五) 方法

    方法用来体现类的行为. 一 相关概念 a) ref和out 通常一个方法只能返回一个值,但如果确实需要返回多个值时,可以使用ref或out.如果方法的参数被标注为ref或out,在调用该方法时,会传递 ...

  6. Spring Boot 中配置文件application.properties使用

    一.配置文档配置项的调用(application.properties可放在resources,或者resources下的config文件夹里) package com.my.study.contro ...

  7. python接口测试—get请求（一）

    python 做借口测试用到的是requests模块,首先要导入requests库,pip install requests 1.get直接请求方式 以豆瓣网为例: url = 'https://re ...

  8. Java中当前对象引用

    题: 计算机画图时,有点的概念,每个点由它的横坐标x 和 纵坐标 y 描述. 写一个类. 求两个点之间的曼哈顿距离 = 横向距离 + 纵向距离 例如,一个点(0,0) 和另一个点(1,1)的曼哈顿距离 ...

  9. HCNA网络技术命令

    1.display version 显示系统软件版本及硬件信息 2.system-view 切换到系统视图 3.quit 切换回用户视图 4.return 从任意非用户视图退回到用户视图 5.sysn ...

  10. Emacs中使用shell（调出terminal）

    在Emacs中使用shell(调出terminal) 方法: M-x eshell 注意:不能使用 M-x shell,这样调用的是 cmd命令,一些命令无法使用