<div class="constant-width-to-height-ratio"></div>

.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}

  

前端web设置div宽高一样的更多相关文章

  1. 关于html中的设置body宽高的理解

    有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效 ...

  2. input与select 设置相同宽高,在浏览器上却显示不一致,不整齐

    遇到 input与select 设置相同宽高,在浏览器上却显示不一致,遂实验了下(IE 10.013 ,Firefox 30.0),得出以下结论 input   width,height 值里面, 不 ...

  3. vue 动态获取div宽高有时候为0的情况

    项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => {    }) ...

  4. Python设置浏览器宽高

    # 发起请求,设置浏览器宽高 # 代码中引入selenium版本为:3.4.3 # 通过Chrom浏览器访问发起请求 # Chrom版本:59 ,chromdriver:2.3 # 需要对应版本的Ch ...

  5. 前端之css(宽高)设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  6. absolute和relative元素 设置百分比宽高的差异

    一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...

  7. div宽高不确定,内容居中

    当div的宽高不确定时候,内容居中:// 加在父级div中 垂直居中:align-items:center; display: -webkit-flex;水平居中:justify-content:ce ...

  8. 偏前端 - 不是固定宽高,页面随设备同比 放大/缩小 展示。不妨看看rem单位,你就有眉目上手做了!!!

    为什么要使用rem 之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类 ...

  9. div宽高设置为百分比

    如果你将div的width和height设置为百分比,但是发现页面都不见了,这是因为父标签也要设置为百分比,也就是说body和html的宽高也需要设置为百分比 #containter{ width:1 ...

随机推荐

  1. 2019-6-23-win10-uwp-未给任务-GenerateAppxPackageRecipe-的必需参数-AppxManifestXml-赋值

    title author date CreateTime categories win10 uwp 未给任务 GenerateAppxPackageRecipe 的必需参数 AppxManifestX ...

  2. Leetcode153. Find Minimum in Rotated Sorted Array寻找旋转排序数组中最小值

    假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 请找出其中最小的元素. 你可以假设数组中不存在重 ...

  3. GUID(Globally Unique Identifier)全局唯一标识符

    最近有大量数据存入数据库时,因为主键为一个nvarchar类型,起初想着用int 类型,每次打开表的时候,获取最后一行的ID,然后让其++. 但发现由于字段是char类型,数据库对其进行了排序.再次插 ...

  4. Django项目:CRM(客户关系管理系统)--18--10PerfectCRM实现King_admin日期优化

    #kingadmin_tags.py # ————————06PerfectCRM实现King_admin注册功能获取内存优化处理———————— # # 因为前端禁止使用下划线开头(_meta.ve ...

  5. 洛谷2593 [ZJOI2006]超级麻将——可行性dp

    题目:https://www.luogu.org/problemnew/show/P2593 发现三个连续牌的影响范围只有3.相同牌的影响范围只有1之后就可以dp了. O(100^7)T飞. #inc ...

  6. 20190817-T1-LOJ6322「雅礼国庆 2017 Day6」Star Way To Heaven

    写这篇题解是因为作者太蒻已经忘了最小生成树了. <题面> 这个题还真是想不到最小生成树. $80\%$算法 复杂度:$\Theta(k^2 \log N )$ 用了二分答案(明显答案具有单 ...

  7. linux压缩打包

    linux下的压缩命令有tar.gzip.gunzip.bzip2.bunzip2. compress.uncompress.zip.unzip.rar.unrar等等,压缩后的扩展名有.tar..g ...

  8. Codeforces 1150D(字符串dp)

    反思 三维的dp压根没看出来,看题解以后思路又很直观,找几道字符串dp练练才行 序列自动机和优化一维略 /* __ __ * ____| |_____| |____ * | | * | __ | * ...

  9. Leetcode599.Minimum Index Sum of Two Lists

    假设Andy和Doris想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. 你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅. 如果答案不止一个,则输出所有答 ...

  10. 【Ruby】与ruby相关的内容

    本博文是为了记录Ruby相关的可学习资源,以便日常使用 在线学习Rails的网站版本 Ruby on Rails教程(Rails 5) Ruby的中文社区 Ruby China