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

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. 卸载Myeclipse10.5 报错“an error has occured.See the log file ...Uninstaller\...”

    找到Myeclipse的安装包,双击它,会出现Uninstaller的按钮,单击卸载即可. 另,网上说,windows下cmd命令道myeclipse.exe 目录,然后执行myeclipse.exe ...

  2. 怎么查找Jenkins的个人api token

    程序中可变部分解释:其中server.build_job方法传入的参数channel为分渠道构建参数,也即jenkins job的参数,这个参数随不同的日常job不同是不同的,实际编写脚本的过程中这个 ...

  3. Python创建空DataFrame及添加行数据

    # 创建空DataFrame df = pd.DataFrame(columns = ['YJML','EJML','SJML','WZLB','GGXHPZ','CGMS']) # 插入数据(忽略索 ...

  4. MySQL重做日志相关

      Ⅰ.事务的实现 这里我们先抛出答案,通过答案再展开分析 特性 实现 A(原子性) redo C(一致性) undo I(隔离性) lock D(持久性) redo/undo 本节针对redo展开分 ...

  5. centos6.9NAT网络模式

    1.对虚拟机进行设置,点击该虚拟机的设置在网络适配器下将网络连接设置为NAT模式. 2.对虚拟机进行设置,点击虚拟机左上方的编辑-->虚拟网络编辑器,将WMnet信息设置为NAT模式,其它的无需 ...

  6. PCA与KPCA

    PCA是利用特征的协方差矩阵判断变量间的方差一致性,寻找出变量之间的最佳的线性组合,来代替特征,从而达到降维的目的,但从其定义和计算方式中就可以看出,这是一种线性降维的方法,如果特征之间的关系是非线性 ...

  7. [MapReduce_3] MapReduce 程序运行流程解析

    0. 说明 Word Count 程序运行流程解析 &&  MapReduce 程序运行流程解析 1. Word Count 程序运行流程解析 2. MapReduce 程序运行流程图

  8. WCF REST模式下的UriTemplate路径问题

    问题:在WCF4.0中,用UriTemplate进行表明路径参数的时候会出现问题 1.创建的项目是Service.Interface[4.0]和Service[4.0]还有Client[4.0] 2. ...

  9. tkinter内嵌Matplotlib系列（二）之函数曲线绘制

    目录 目录 前言 (一)对matplotlib画布的封装: (二)思路分析: 1.需求说明: 2.框架的设置: 3.文件说明: (三)各文件的源代码 1.main.py 2.widget.py 3.f ...

  10. Hbase-2.0.0_02_常用操作

    主要是常用的hbase shell命令,包括表的创建与删除,表数据的增删查[hbase没有修改]:以及hbase的导出与导入. 参考教程:HBase教程 参考博客:hbase shell基础和常用命令 ...