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;
}
提示:你可以先修改部分代码再运行。
不过这样写的坏处是多了个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 : '';
}
提示:你可以先修改部分代码再运行。
恩这样看起来是不是清爽多了。
html 百分比正方形,css实现未知宽度的正方形需求相关推荐
- CSS实现自适应浏览器宽度的正方形
2019独角兽企业重金招聘Python工程师标准>>> CSS实现自适应浏览器宽度的正方形有以下三种方法: 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分 ...
- 使用CSS定义一个和屏幕宽度一样正方形容器
使用CSS定义一个和屏幕宽度一样正方形容器 介绍一下如何使用CSS定义一个和屏幕宽度一样正方形容器. 问题 有时候,我们在移动端需要做一个商品展示页面,一打开页面,屏幕的上面一半展示为商品的图 ...
- html 百分比正方形,css 中的百分比计算方法
CSS支持多种单位形式,如百分比.px.pt.rem等,百分比和px是常用的单位,随着移动端和响应式的流行,rem.vh.vw也开始普遍使用. 今天在SegmentFault社区碰到了两个关于百分比计 ...
- [css] box-sizing的宽度包含了哪些?
[css] box-sizing的宽度包含了哪些? 这个得根据box-sizing来计算:1.box-sizing: content-box; width = width + 2border + 2p ...
- css根据当前宽度设置css,JS和CSS实现自动根据分辨率设置页面宽度
为了实现自动根据分辨率设置页面宽度,首先我们要先知道一个JavaScript脚本document.documentElement.clientWidth获取页面宽度. 为了说明在IE和FireFox等 ...
- 怎么修改html的空格大小,css设置空格宽度间距样式
不必打多个空格或空格字符代码就兴许实现粗略空格若干好多个字宽度成果 html网页里键盘打多个空格,全部涉猎器中看到也只要1个空格的位子间距,除了使用空格字符外,是可以用css来配置管教失格宽度间距的 ...
- css文字超出宽度自动换行
CSS文字超出宽度自动换行[转] word-wrap:break-word; word-break:break-all; overflow: hidden;/*这个参数根据需求来决定要不要*/ 目录 ...
- html 创建一个正方形,css 如何设置带有正方形项目的列表
css设置带有正方形项目的列表的方法:首先创建一个HTML示例文件:然后使用ul无序列表标签,并指定"list-style-type"为"square"即可设置 ...
- html标签设置正方形,css 如何设置带有正方形项目的列表
css设置带有正方形项目的列表的方法:首先创建一个HTML示例文件:然后使用ul无序列表标签,并指定"list-style-type"为"square"即可设置 ...
最新文章
- esp32摄像显示时间_TinyPICO-比拇指还小的ESP32开发板- 国外创客众筹发现第二期
- 获取一个目录下文件扩展名为txt或htm或html的文件的几种方法
- 信息系统项目管理师优秀论文:沟通与干系人管理
- Git之深入解析凭证存储
- 接口——Serializable
- 多个线程访问统一对象的不同方法_分析| 你未必真的了解线程安全,别骗自己,来看下怎么实现线程安全...
- SQL中多表查询:左连接、右连接、内连接、全连接、交叉连接
- 促销海报灵感素材,不卖出去都难
- sqlite3:not found 解决方法
- jQuery实现倒计时重新发送短信验证码功能示例
- linux中screen命令的用法
- python实现验证码图像数据去噪处理的心路历程
- 2019牛客暑期多校训练营(第五场)G	subsequence 1(dp+组合数)
- aspnetpager使用介绍
- 群控云控SDK开发包(快速开发群控云控微信SCRM客服系统)
- 腾讯云服务器安全组8080端口开放教程
- 计算机通电后自动断电,电脑自动断电,教您电脑开机自动断电怎么解决
- C# 制作贪吃蛇小游戏,最简单的实现
- Linux——从命令行配置网络、编辑网络配置文件
- 安全修改postgresql用户密码
热门文章
- 小程序开发(7)-之获取手机号、用户信息
- 省培计算机实践作业,计算机软件基础强化实践能力培养实践部分考核作业.doc...
- android顶部导航高度,Android特效——————底部/顶部导航条(Fragment+ViewPaper+XTabLayout)...
- python模块用法教程_Python学习之asyncore模块用法实例教程
- qt实现窗口拖动的两种思路
- BugkuCTF-MISC题又一张图片,还单纯吗
- matlab中多边形滤波器,几种常见空间滤波器MATLAB实现
- php正则表达式 匹配数字,正则表达式之匹配数字范围
- vb mysql_VB连接MYSQL实例
- wamp怎么安装mysql服务器_用wamp的mysq安装pythonmysql