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

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. Oracle 11g中修改被锁定的用户：scott

    在安装完Oracle10g和创建完oracle数据库之后,想用数据库自带的用户scott登录,看看连接是否成功. 在cmd命令中,用“sqlplus scott/ tiger”登录时,老是提示如下信息 ...

  2. Python从入门到精通

    最近研究了一下Python,名不虚传,确实挺精彩. 学习一门新的语言,我认为从入门到精通的做法是:下SDK.装IDE.练教程.结合工作应用.不断踩坑进阶.梳理总结 1.下SDK(2.7.15) 下载地 ...

  3. (网页)Uncaught ReferenceError: pageImport is not defined

    在js开发中,很多人遇到类似问题,都找不到解决方法.Uncaught ReferenceError: $ is not defined,在这里给大家提供几个解决方法. 1.出现这个错误,最可能的是引用 ...

  4. Sql Server 增加字段、修改字段、修改类型、修改默认值

    1.修改字段名: alter table 表名 rename column A to B 2.修改字段类型: alter table 表名 alter column 字段名 type not null ...

  5. Android ListView在增加HeaderView之后使用getLocationInWindow和getLocationOnScreen获得值不正确的解决方法

    近日遇到一个很恶心的问题,把解决方法放到空间里来分享给大家: 问题发生的条件: 1)ListView 控件中使用addHeaderView,为其添加了一个header view.(基本常识:heade ...

  6. Cockpit subscriptions on CentOS 7 - This system is not registered with an entitlement server. You can use subscription-manager to register.

    下午安装 cockpit 时,使用 yum 工具的时候哦,出现如下信息: This system is not registered with an entitlement server. You c ...

  7. Python面试题（一）【转】

    注:本面试题来源于网络,转载自http://www.cnblogs.com/goodhacker/p/3366618.html. 1. (1)python下多线程的限制以及多进程中传递参数的方式 py ...

  8. ORA-12538;ORA-12154；使用PL/SQL dve无法连接远程服务器上的oracle数据库，同时本机上也安装了一个oracle数据库

    问题描述:本人使用PL/SQL dve连接远程服务器上的oracle数据库,一直是没有问题的.我想提高下自己在数据库方面的能力就在自己的笔记本上安装了一个oracle数据库实例,安装并配置好之后,使用 ...

  9. bash的内置字符串处理工具

    bash内置字符串处理工具: 1.字符串切片: ${var:offset:number} 取字符串的子串: ${var:  -length} 取字符串的最右侧的length个字符.注意:冒号右侧必须有 ...

  10. U890采购入库单修改供应商

    采购入库单表头 SELECT *FROM RdRecordWHERE (cCode = '0000051801') 采购入库单表体 SELECT *FROM RdRecordsWHERE (cPOID ...