html 百分比正方形,css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。

第一个方法利用图片的等比例缩放,用base64写一个1*1的透明png图片,宽度100%,这样容器就自动被撑成一个正方形,

demo如下

test

*{

margin:0;

padding:0;

}

.img{

display:inline-block;

margin: 1%;

width: 30%;

background: #ff6600;

}

.img img{

width: 100%;

display: block;

}

AL+hc2rNAAAAABJRU5ErkJggg==

AL+hc2rNAAAAABJRU5ErkJggg==

AL+hc2rNAAAAABJRU5ErkJggg==

提示:你可以先修改部分代码再运行。

不过这样写的坏处是多了个img标签,看着不干净,于是想了另一种方法,就是利用padding的百分比值基于父容器宽度的特性,给div的after伪元素一个padding-top:100% 的值,这样就把高撑的和宽度一样了,demo如下:

test

*{

margin:0;

padding:0;

}

.box{

display:inline-block;

margin: 1%;

width: 30%;

background: #ff6600;

}

.box::after{

display: block;

padding-top: 100%;

content : '';

}

提示:你可以先修改部分代码再运行。

恩这样看起来是不是清爽多了。

059d4f25abc7568315a06611763548af.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/534553.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html引用本地图片不能是桌面的,Img标签与本地文件:/// URL不显示在Microsoft Edge Web浏览器...

在我的桌面应用程序中,我创建了一个临时HTML文件(旨在让用户打印报告),然后通过默认显示网页浏览器。这个HTML文件保存在一个临时文件夹,例如:C:/Users/UserName/AppData/Local/TempImg标签与本地文件:/// URL不显示在…

你用计算机做过什么事情,他偷偷干了什么?(电脑)

我一本正经地胡说一下吧。控制面板→管理工具”中找到的“事件查看器”,通过它可以了解系统的喜怒哀乐和一言一行事件查看器相当于一本厚厚的系统日志,可以查看关于硬件、软件和系统问题的信息,也可以监视Windows XP的安全事件,下…

怎么用计算机算立方数,计算器的使用方法

计算器人们都很熟悉,尤其是从事数据行业的人更要懂得如何使用计算器,那么外行人士想要正确使用计算器该怎么办呢?今天小编就来为您解围。计算器包括标准型和科学型两种,其中标准型使用方法如下:1、键入数字时,按下相应…

有计算机知识,计算机基本理论基础知识总汇

计算机基本理论基础知识总汇1、计算机按照数据处理规模大小可以分为(巨型计算机)(大型计算机)(小型计算机)(微型计算机)(工作站)等2、计算机的硬件主要由(控制器)(运算器)(存储器)(输入输出设备)以及电源等硬件组成。3、计算机主机是(控制器)(运算器)(存储器)的总称&#xff0c…

麻省理工学院计算机科学与工程博士,2020年麻省理工学院博士读几年

麻省理工学院(Massachusetts Institute of Technology),简称麻省理工(MIT),坐落于美国马萨诸塞州剑桥市(大波士顿地区) ,是世界著名私立研究型大学、被誉为"世界理工大学之最"。麻省理工学院博士读几年麻省理工学院博士一般读5年&a…

厦门信息计算机专业录取分数,厦门大学计算机类(含计算机科学与技术、智能科学与技术、网络专业2016年在福建理科高考录取最低分数线...

类似问题答案厦门大学计算机类(含计算机科学与技术、智能科学与技术、网络专业2016年在北京理科...学校 地 区 专业 年份 批次 类型 分数 厦门大学 北京 计算机类(含计算机科学与技术、智能科学与技术、网络 2016 一批 理科 650 学校 地 区 专业 年份 批次 类型 分数 厦门大学 …

辽宁412想学计算机科学技术,辽宁理工学院计算机科学与技术专业2016年在辽宁理科高考录取最低分数线...

类似问题答案辽宁理工学院计算机科学与技术专业2016年在河北理科高考录取最低分数线学校 地 区 专业 年份 批次 类型 分数 辽宁理工学院 河北 计算机科学与技术 2016 二批 理科 443 辽宁理工学院 河北 计算机科学与技术 2016 二批 理科 443 辽宁理工学院 河北 计算机科学与技术…

为什么计算机语言都是英语,编程为什么都是英语 编程为什么没有汉语

编程为什么都是英语?编程为什么没有汉语?一些想写编程但英语又不好的同学想知道编程为什么都是英语,为什么没有汉语,下面就让小编为大家介绍一下其实是有汉语编程语言的,感兴趣的小伙伴一起来看看吧,有一门…

学计算机随随便便上万,大学“最烧钱”专业排行榜,“家境一般”慎入,“土豪”请随意...

俗话说“高考七分考,三分报”,而这也意味着在高考当中不仅考试重要,在高考后的填报志愿也是非常重要的,因为填报志愿也代表着在大学期间学习什么专业,也代表着在毕业后会从事什么行业,所以报考专业一定要慎…

flash 用 html 播放,使用flash插件在HTML上播放音频

原文链接:WordPress Audio Player 非插件方式使用方法Standalone versionThe standalone version comes with a JavaScript file to simplify configuring and embedding the player. This file includes theswfobject library.Note: the zip file includes two oth…

苏大计算机学院在哪,苏州大学和扬州大学都位于江苏,这两所大学,哪一所的实力更强?...

原标题:苏州大学和扬州大学都位于江苏,这两所大学,哪一所的实力更强?一个朋友问我这么一个问题:“苏州大学和扬州大学都位于江苏,这两所大学,哪一所的实力更强?”经常看到这么一句话…

科学计算机fx-82es,fx-82ES PLUS A -2卡西欧计算器-计算器 函数科学-卡西欧官方商城...

卡西欧官方商城只接受来自中国大陆地区的订单,订单配送范围仅限中国大陆地区。发货时间1.普通商品订单:周一至周日均可发货。当天17:00前的订单可当天安排发货,17:00后的订单则第二天安排发货。如遇量大及大型活动期间…

计算机技术博客博客知乎,我的技术博客的选择:CSDN、博客园、简书、知乎专栏仍是Github Page?...

有不少技术人员在学习到必定程度后发现了写博客的重要性,一方面帮助本身记忆,一方面也能帮助他人解决问题,因而会选择本身开始写博客,以后又发现平台太多不知从何下手,在这里我根据本身写博客的经验比较一下各个平台的…

计算机文化基础重点知识归纳,计算机文化基础_第二章重点知识总结(考试必备!!!)...

操作系统:是管理软硬件资源、控制程序执行、改善人机界面、合理组织计算机工作流程和为用户使用计算机提供良好运行环境的一种系统软件。操作系统的四种特性:并发性、共享性、虚拟性、异步性。并发性:是指两个或两个以上的运行程序在同一时间…

计算机入门 姚班,清华“姚班”:学霸中的尖子生,大佬毕业后都去哪了?

清华大学作为国内顶尖学府,其招收的都是来自全国各地的各种各样顶尖的学子,不过,在这所顶级学府之中,还有一个班级被认为是尖子生的“尖子班”,能够进入这个班级学习的学生可谓是凤毛麟角,他们往往智商过人…

c++生成光栅条纹程序_共享屋:一文让你认识光栅尺和编码器

坚持学习与健身,是对自己最大的投资每天进步一点点共享屋数控机床电气调试与维修微信:799309212大家好,我是共享屋,每天通过一篇文章分享我的经验与观察,希望能够给你一些启发或者帮助。分享的主题是有关数控机床电气调…

计算机安全事故由谁整改,信息安全检查整改方案 整改方案 .doc

信息安全检查整改方案 整改方案篇一:信息安全检查整改报告XX市工商行政管理局关于2012年信息安全检查整改报告市公安局:4月18日贵单位对我局进行信息安全等级保护工作进行监督检查后,按照《中华人民共和国计…

修改蓝牙耳机按键映射_喜欢玩游戏的不要错过了,五款高性能游戏蓝牙耳机推荐...

随着电竞行业的发展,不少人都会在休闲时打打游戏娱乐一下,尤其是手游火爆以后,玩游戏的人就更多了,像是王者荣耀,和平精英,穿越火线等等,几乎都是装机必备。不过现在的游戏需要有很好的声音呈现…

笔吧评测室所用测试软件,这是一台假游戏本:笔吧评测室 GIGABYTE 技嘉 Aero15 Classic-XA 游戏本 测评...

这是一台假游戏本:笔吧评测室 GIGABYTE 技嘉 Aero15 Classic-XA 游戏本 测评2019-05-09 17:20:5118点赞26收藏21评论经常看我们日常推送的同学们最近都获得了一个全新的知识点——高刷新率屏幕也有色彩差的了 !过去120Hz或者144Hz都至少搭载了72%NTSC色域…

https开头的网址是什么意思_我想打这个面试官,他给我挖坑,问我:URI中的 “//” 有什么用?...

我们在浏览网页的时候,需要在浏览器中输入http://或者https://开头的URL地址,类似http://honeypps.com,那么这里的"://"或者"//"有什么用呢?说到URL就不得不提URI了。用什么来标记服务器上的资源呢&#xff1…