使用css让动态容器按固定宽高比显示
需求：页面上有一个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让动态容器按固定宽高比显示的更多相关文章
- css实现保持div的等宽高比
这篇文章主要为回答这个问题:“做响应式网页,如何让一个div的高和宽保持比例放大或是缩小?”,这里不介绍媒体查询的实现. 那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可 ...
- 确保img的宽高比固定
html: <div class="wrapper"> <swiper :options="swiperOption"> <swi ...
- CSS 图片自适应容器
https://www.jb51.net/css/660677.html 经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式 我们马上就能想到,把width.height 设置为1 ...
- 我的前端组件 ---- 16:9固定宽高比例的div
目标:遇到一个需求,让图片在页面中,不管宽度如何变化.宽高保持16:9的比例. 实现: 方法一:这也是比较经典的一个方法,利用padding-bottom来实现. <!DOCTYPE html& ...
- android -------- ConstraintLayout 宽高比和偏移量比（三）
前面的文章 ConstraintLayout 介绍 (一) ConstraintLayout约束属性 (二) 此博文主要讲解: app:layout_constraintHorizontal_bias ...
- CSS左侧固定宽 右侧自适应（兼容所有浏览器）
左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- 【原】用css让一个容器水平垂直
这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...
- div 固定宽高 水平垂直居中方法
div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...
随机推荐
- Node - centOS配置环境
1.安装依赖包:yum install gcc-c++ openssl-devel (gcc版本查询:gcc -v ,为 4.4.7-11:python版本查询:python –version 为2. ...
- 学习笔记CB009:人工神经网络模型、手写数字识别、多层卷积网络、词向量、word2vec
人工神经网络,借鉴生物神经网络工作原理数学模型. 由n个输入特征得出与输入特征几乎相同的n个结果,训练隐藏层得到意想不到信息.信息检索领域,模型训练合理排序模型,输入特征,文档质量.文档点击历史.文档 ...
- parrotsec 和 kali安装系统的时候出现“executing grub-install dummy”的解决方案
在物理机的环境下安装系统出现点问题,弄了好一会才弄出解决方法 1.parrot和kali安装的时候出现了无efi分区不能继续的问题,要知道我之前安装的时候一直都是\ ; 内存; \home三个分区搞定 ...
- 汇编实验2（又是作业emm）
实验任务:学会使用debug 1.使用Debug,将程序段写入内存: 首先对0021:0000~0021:000F的内存赋值 这里我赋的值是 11 12 13 14 15 16 17 18 输入mov ...
- JNI学习笔记_Java调用C —— 非Android中使用的方法
一.学习笔记 1.java源码中的JNI函数本机方法声明必须使用native修饰. 2.相对反编译 Java 的 class 字节码文件来说,反汇编.so动态库来分析程序的逻辑要复杂得多,为了应用的安 ...
- Flagr 配置说明
说明文档来自官方文档 https://checkr.github.io/flagr/#/flagr_env 完整配置 包含了组件的配置参数以及说明,对于学习如何使用Flagr 还是很重要的,包含了数据 ...
- Foundations of Game Engine Development Volume 1 Mathematics (Eric Lengyel 著)
http://www.foundationsofgameenginedev.com/ Chapter1 Vectors and Matrices (已看) Chapter2 Transforms (已 ...
- 创建一个dynamics 365 CRM online plugin (四) - PreValidation
开始之前,我们要确认一下 Plugin 的 pipeline. PreValidation -> PreOperation -> Server Side System Main Event ...
- 单机版Kubernetes集群（一）
环境:CentOS Linux release 7.4.1708 (Core) 单机版Kubernetes集群的效果,如图: 1)JSP页面通过JDBC直接访问Mysql数据库并展示:这里只是为了 ...
- zabbix之 orabbix模板监控oracle
一.Orabbix简介 Orabbix是设计用来为zabbix监控Oracle的数据库的插件,它提供多层次的监控,包括可用性和服务器性能的指标.它提供了从众多Oracle实例采集的有效机制,进而提供此 ...