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

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. python之变量与常量

    变量:把程序运行过程中产生的值,暂时存储在内存,方便后面的程序调用. 被引号括起来的内容是字符串,原样输出.#单行注释 用来标注代码信息,特点:被注释的内容不会被执行.Ctrl + /'''内容''' ...

  2. 常见编码GBK、GB2312、UTF-8、ISO-8859-1的区别

    https://blog.csdn.net/shijing_0214/article/details/50908144 在项目开发中,会经常遇到不同的编码方式.不管什么编码,都是信息在计算机中的一种表 ...

  3. 排错-lr回放错误Vuser failed to initialize extensi...解决方法

    lr回放错误:Vuser failed to initialize extension LrXml.dll解决方法   by:授客 QQ:1033553122 步骤1:找到LR安装位置,打开协议目录 ...

  4. vue axios 与 FormData 结合 提交文件 上传文件

    ---再利用Vue.axios.FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了. 1.因为使用了new  F ...

  5. recovery 升级过程LED灯闪烁

    Android设备在进入recovery升级的过程,我们在屏幕上面可以看到升级的机器人动画,以及升级的进度显示.这仅限于有屏幕的设备,比如平板PAD,电视TV等,对与没有屏幕的盒子BOX,那么在不接入 ...

  6. IP地址及子网划分

    1.IP地址 2.子网掩码 网络号全转为1,主机号全转为0,之后再转化为10进制表示. 3.无分类编址

  7. [20170703]从备份集取出spfile转化为pfile.txt

    [20170703]从备份集取出spfile转化为pfile.txt --//上个星期的事情,要从备份集里面取出看看spfile文件某个参数当时的情况,结果尝试命令老是出错,做一个记录.--//最后选 ...

  8. java 基础one ---运算符and流程控制

    首先java这个了解下java的基础 首先java文件都是以.java结尾的  然后 他所有的内容都是有一个入口的就是放在了public static void main(String [] args ...

  9. 使用缓存方式优化递归函数与lru_cache

    一.递归函数的弊端 递归函数虽然编写时用很少的代码完成了庞大的功能,但是它的弊端确实非常明显的,那就是时间与空间的消耗. 用一个斐波那契数列来举例 import time #@lru_cache(20 ...

  10. Windows结构化异常处理浅析

    近期一直被一个问题所困扰,就是写出来的程序老是出现无故崩溃,有的地方自己知道可能有问题,但是有的地方又根本没办法知道有什么问题.更苦逼的事情是,我们的程序是需要7x24服务客户,虽然不需要实时精准零差 ...