<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. linux后台执行程序相关命令

    linux下我们如果想一个任务或者程序还后台执行可以使用&,实际上linux还提供了其他任务调度的命令. bg将一个在后台暂停的命令,变成继续执行 fg将后台中的命令调至前台继续运行 jobs ...

  2. Docx 生成word文档

    1.生成word代码 /// <summary> /// 生成word文档 /// </summary> /// <param name="tempPath&q ...

  3. WPF 利用HwndSource拦截Windows消息

    WPF提供了一个HwndSource可以使你更快的实现处理Windows消息. 通过HwndSource.FromHwnd得到的HwndSource可以添加(AddHook)移除(Remove)Hoo ...

  4. SpringBooot-基础<1>-构建项目

    SpringBooot-基础<1>-构建项目 使用Springboot创建web工程,我使用的工具:STS,JDK1.8 1. File -> New -> Maven Pro ...

  5. php分页查询的简单实现代码

    <body><h1>分页查询</h1><?phpinclude("DADB.class.php");$db=new DADB();$tj= ...

  6. 学习笔记(2)---Matlab 图像处理相关函数命令大全

    Matlab 图像处理相关函数命令大全 一.通用函数: colorbar  显示彩色条 语法:colorbar \ colorbar('vert') \ colorbar('horiz') \ col ...

  7. Spring Boot → 01:概要

    背景 大约20年前,程序员们使用“企业级Java Bean”(EJB)开发企业应用,需要配置复杂的XML. 在二十世纪初期,新兴Java技术——Spring,横空出世.使用极简XML和POJO(普通J ...

  8. SVN经常使用操作

    版权声明:本文为博主原创文章.转载请注明出处. https://blog.csdn.net/Jerome_s/article/details/27950055 Subversion(简称svn)安装 ...

  9. SQL优化神器 - Tosska SQL Tuning Expert Pro for Oracle

    SQL Tuning Expert Pro for Oracle 是Tosska 公司推出的划时代SQL优化工具.它可以帮助SQL开发人员和DBA: 找到最快的等价SQL: 调整执行计划: 管理SQL ...

  10. Eslint报错的翻译

    若在git中出现这个 http://eslint.org/docs/rules/eol-last 他是提醒你:在文件末尾要求或禁止换行 比如代码如下: 若在git中出现这个 https://eslin ...