<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. 获取MMSQL数据库表信息

    SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号=a.colorder, 字段名=a.n ...

  2. niec-validator 表单验证使用案例

    css .msg-box span { font-size: .5rem; color: #7699c6; } .msg-box .tip { padding-left: 18px; backgrou ...

  3. CodeChef--SEPT14小结

    这套题目只做了几个相对简单的.其他的做起来比较吃力. A 找下规律 /***************************************************************** ...

  4. IoT: 物联网安全测试经验总结

    前言 今年早些时候,我参与了许多关于物联网解决方案的安全测试.主要目标是找出体系结构和解决方案中的漏洞.在这篇文章中,我将讨论一些与物联网解决方案的问题和挑战. 什么是物联网? 在你学习有关IPv6的 ...

  5. Java review-basic1

    1. Dependency Injection Answer: Any application is composed of many objects that collaborate with ea ...

  6. IO多路复用,协程

    https://www.cnblogs.com/wangjun187197/p/9642429.html Python之路--协程/IO多路复用 I/O复用模型 此模型用到select和poll函数, ...

  7. neo4j中对节点关系和聚类的思考

    由于neo4j在查找过程中具有事务,所以查询的速度非常慢!给出的建议如下: 一,将所有查询放在一个Session中,当所有查询完毕以后在关闭Driver和Session: 二,使用neo4j连接池,使 ...

  8. P3303 [SDOI2013]淘金

    题目描述 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块. 一阵风吹过,金子的位置发生了 ...

  9. C#基础之Async和Await 的异步编程

    官方文档地址:https://docs.microsoft.com/zh-cn/dotnet/csharp/programming-guide/concepts/async/ Coffee cup = ...

  10. ML面试1000题系列(1-20)

    本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 1.简要介绍SVM 全称是support vec ...