需求：页面上有一个div的宽度是随着屏幕宽度的改变而改变的，但其宽高比始终是2:1，也就是当宽度是1000px时，高度为500px

分析：无论浏览器窗口如何改变，始终要让目标元素的宽高比保持2:1，我们第一个想到的可能是使用js来实现，但是使用js来实现往往会比较耗费性能，那么今天我们就来讲下使用css来完成这个需求。

实现：作为“码农”我们还是直接上代码来得直观一点！

html:

<body>
　　<div class="container">
　　　　<div class="bracket"></div>
　　　　<div class="target"></div>
　　</div>
</body>

这里的.target为目标元素（让其宽高2:1），.container为容器，而bracket为“支架”（实现需求的关键）

css：

<style type="text/css">
　　.container{
　　　　width: 40%;
　　　　position: relative;
　　　　/*出发BFC，否则内部元素撑不开container*/
　　　　overflow: hidden;
　　　　/*为了让大家看清楚效果加的边*/
　　　　border: 1px solid black;
　　}
　　/*支架，用于按2:1的宽高比撑开父级元素，如果是4:3，那么这里改成75%即可*/
　　.bracket{
　　　　margin-top: 50%;
　　}
　　.target{
　　　　position: absolute;
　　　　top: 0;
　　　　bottom: 0;
　　　　left: 0;
　　　　right: 0;
　　　　background-color: pink;
　　}
</style>

.container是我们的容器，因为宽度是百分比，所以它的宽度会随着浏览器窗口的改变而改变，相应的.target也是如此。

而这里的.bracket设置了margin-top: 50%; 那么它的margin-top的实际值就是父级元素（.container）的宽度的一半，这里要注意，是父级元素的宽度，所以这里撑开的高度是宽度的一半，也就基本完成了宽高比2:1的需求。

最后，我们将.target填满整个容器，也就是position:absolute;之后，上、下、左、右全部为0即可。

这里我再贴下完整的代码：

<!doctype html>
<html lang="en">
<head>
　　<meta charset="UTF-8" />
　　<title>demo</title>

　　<style type="text/css">
　　.container{
　　　　width: 40%;
　　　　position: relative;
　　　　/*触发BFC，否则内部元素撑不开container*/
　　　　overflow: hidden;
　　　　/*为了让大家看清楚效果加的边*/
　　　　border: 1px solid black;
　　}
　　/*支架，用于按2:1的宽高比撑开父级元素，如果是4:3，那么这里改成75%即可*/
　　.bracket{
　　　　margin-top: 50%;
　　}
　　.target{
　　　　position: absolute;
　　　　top: 0;
　　　　bottom: 0;
　　　　left: 0;
　　　　right: 0;
　　　　
　　}
　　</style>

</head>
<body>
　　<div class="container">
　　　　<div class="bracket"></div>
　　　　<div class="target"></div>
　　</div>
</body>

</html>

注：这个办法也不是我想出来的，而是网上搜索找到的，正好我的项目中要使用且觉得很不错就自己整理了一下，谢谢网上的大牛们！！！

使用css让动态容器按固定宽高比显示的更多相关文章

  1. css实现保持div的等宽高比

    这篇文章主要为回答这个问题:“做响应式网页,如何让一个div的高和宽保持比例放大或是缩小?”,这里不介绍媒体查询的实现. 那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可 ...

  2. 确保img的宽高比固定

    html: <div class="wrapper"> <swiper :options="swiperOption"> <swi ...

  3. CSS 图片自适应容器

    https://www.jb51.net/css/660677.html 经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式 我们马上就能想到,把width.height 设置为1 ...

  4. 我的前端组件 ---- 16:9固定宽高比例的div

    目标:遇到一个需求,让图片在页面中,不管宽度如何变化.宽高保持16:9的比例. 实现: 方法一:这也是比较经典的一个方法,利用padding-bottom来实现. <!DOCTYPE html& ...

  5. android -------- ConstraintLayout 宽高比和偏移量比（三）

    前面的文章 ConstraintLayout 介绍 (一) ConstraintLayout约束属性 (二) 此博文主要讲解: app:layout_constraintHorizontal_bias ...

  6. CSS左侧固定宽 右侧自适应（兼容所有浏览器）

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  7. 【CSS】三栏/两栏宽高自适应布局大全

    页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...

  8. 【原】用css让一个容器水平垂直

    这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...

  9. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

随机推荐

  1. 《Java核心技术（卷一）》读书笔记——第六章：内部类

    1.      内部类的概念? 类中类 2.      为什么要用内部类? 内部类的方法可以访问外部类的实例域 内部类对外部类的同一个包中的类实现了隐藏 匿名内部类在“想要定义一个回调函数却又不想编写 ...

  2. Kali安装zmap简单介绍

    zmap是一个非常方便的扫描器,跟nmap和masscan一样,不过区别在于zmap他快,号称是一小时扫遍整个互联网.主要使用方式是TCP SYN scan.TCP connectscan.UDP s ...

  3. http和https区别及概念

    HTTP:是互联网上的应用广泛的一种网络协议,是一个客户端和服务器端请求和应答的传输协议,它可以使浏览器更加高效,使网络传输减少. HTTPS:是以安全为目标的HTTP通道,简单讲是HTTP的安全版, ...

  4. LeetCode - Min Remaining Chess Pieces

    假设有一个棋盘(二维坐标系), 棋盘上摆放了一些石子(每个石子的坐标都为整数). 你可以remove一个石子, 当且仅当这个石子的同行或者同列还有其它石子. 输入是一个list of points. ...

  5. Windows batch file

    Echo off @ECHO OFF echo string to generate the output create a blank line echo . create a file echo ...

  6. 面试题-Python高级

    元类 Python 中类方法.类实例方法.静态方法有何区别? 类方法:是类对象的方法,在定义时需要在上方使用“@classmethod”进行装饰,形参为cls, 表示类对象,类对象和实例对象都可调用: ...

  7. Django学习笔记之数据库-模型的操作

    模型的操作 在ORM框架中,所有模型相关的操作,比如添加/删除等.其实都是映射到数据库中一条数据的操作.因此模型操作也就是数据库表中数据的操作. 添加模型 添加模型到数据库中.首先需要创建一个模型.创 ...

  8. guava学习，集合专题

    lists //JDKList<String> list = new ArrayList<String>();list.add("a");list.add( ...

  9. Redis类的源码使用

    $redis = new Redis(); //连接redis服务器 $redis->connect('127.0.0.1', '6379'); $key = "key"; ...

  10. Centos6两个镜像文件的合并方法

    1.相关目录: /mnt/dvd1和/mnt/dvd2 用于挂载 Centos 镜像 /mnt/dvd3 合并后的镜像文件 /mnt/iso ISO储存 mkdir -p /mnt/dvd1 /mnt ...