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

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. 14.python与数据库之mysql：pymysql、sqlalchemy

    相关内容: 使用pymysql直接操作mysql 创建表 查看表 修改表 删除表 插入数据 查看数据 修改数据 删除数据 使用sqlmary操作mysql 创建表 查看表 修改表 删除表 插入数据 查 ...

  2. maven(四)：一个基本maven项目的pom.xml配置

    继续之前创建的test项目,一个基本项目的pom.xml文件,通常至少有三个部分 第一部分,项目坐标,信息描述等 <modelVersion>4.0.0</modelVersion& ...

  3. 洗礼灵魂，修炼python（34）--面向对象编程（4）—继承

    前面已经说到面向对象编程有封装,继承,多态三大特性,那么其中的继承则很重要,可以直接单独的拿出来解析 继承 1.什么是继承: 字面意是子女继承父母的家产或者特性等.而在编程里继承是指子类继承父类(基类 ...

  4. 修改Devexpress DateEdit控件默认的日期格式和日历风格

    最近项目中很多地方使用到DevExpress的DateEdit控件,而且设置都是一致(日期格式.选择日期的日历的风格等).每一次都需要设置太痛苦,因此需要寻找一种高效的解决方式. 一. 设置好一个作为 ...

  5. windows 自动贴边

    设置windows 自动贴边(窗口拖到显示器边框就自动适应屏幕): https://jingyan.baidu.com/article/d2b1d1029d17b95c7e37d4f0.html 资源 ...

  6. 【PAT】B1070 结绳（25 分）

    此题太给其他25分的题丢人了,只值15分 注意要求最终结果最长,而且向下取整 #include<stdio.h> #include<algorithm> using names ...

  7. 浅谈tidb事务与MySQL事务之间的区别

    MySQL是我们日常生活中常见的数据库,他的innodb存储引擎尤为常见,在事务方面使用的是扁平事务,即要么都执行,要么都回滚.而tidb数据库则使用的是分布式事务.两者都能保证数据的高一致性,但是在 ...

  8. IntelliJ IDEA 创建Spring项目

    第一步:点击file --> new --> project... 第二步: 在左侧选择Spring, 然后勾选Spring , 最后点击Next 第三步 : 填写项目名称和项目地址,点击 ...

  9. Alpha版本 - 用户反馈

    Alpha版本 - 用户反馈 使用情况 (前天发出了内测apk给身边的人小范围使用,到目前共有31名用户使用过产品) 新增用户数: 用户事件数: Bug反馈 登录/注册出现"无响应" ...

  10. JAVA基础-栈与堆,static、final修饰符、内部类和Java内存分配

    Java栈与堆 堆:顺序随意 栈:后进先出(Last-in/First-Out). Java的堆是一个运行时数据区,类的对象从中分配空间.这些对象通过new.newarray.anewarray和mu ...