CSS 实现自适应宽高的正圆

利用CSS伪元素增加父元素的高度，使其变成一个正方形

代码

<span class="circle-container"><span class="circle">{{number | filterNumber}}</span>
</span>

.circle-container {display: inline-block;border-radius: 50%;min-width: 50px; /*如果min-height太小（一般>=25即可，这里取50为了使数字在3位数以下大小一致） 会被字体的大小撑开导致形成的圆不圆*/min-height: 50px;padding: 5px;text-align: center;box-sizing: content-box;line-height: 1;white-space: nowrap;&:before {content: '';display: inline-block;vertical-align: middle;padding-top: 100%;height: 0;}& > span{display: inline-block;vertical-align: middle;}
}

Refernce

https://stackoverflow.com/questions/41855730/css-circle-without-using-fixed-width-and-height/41856203

CSS 实现自适应宽高的正圆相关推荐

CSS——图片自适应宽高
宽度拉伸:把width设置成100%,height设置auto 高度拉伸:把height设置成100%,width设置auto <!DOCTYPE html> <html lan ...
html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding ...
css实现整体网页16 9,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.ddpool.cn/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100 ...
html表格实现图片排列布局,纯css实现朋友圈照片排列布局（附单图自适应宽高）...
效果图 image.png image.png image.png image.png image.png 思路设置flex实现正常的三列布局 ul{ padding:0px; width:300p ...
图片圆角边框自适应宽高（深夜原创）
最近挺忙,没来得及更新博客!夜深了,给大家分析下几种图片圆角边框自适应宽高在不同情况下代码实现方法.请先看如下代码: <!DOCTYPE html> <head> <me ...
UILabel实现自适应宽高需要注意的地方（三）
一.需求图如下所示 UILabel 的高度自适应 UILabel中的段落间距可设置图片效果如下: 调整段落适应长宽高方式: 需求: 保证"游戏玩法" 章节,UILabel高度自 ...
Excel单元格插入图片，并自适应宽高——保姆级教程
Excel单元格插入图片,并自适应宽高--保姆级教程 author:陈镇坤27 日期:2022年3月22日创作不易,转载请注明来源摘要:计算图片高宽像素,将Excel单元格高宽单位转化为以像素为单 ...
小程序图片自适应宽高，保持图片比例不变
小程序图片自适应宽高,保持图片比例不变小程序中,可根据需求给image设置 mode属性来控制图片的裁剪.缩放模式如果要保持图片在容器内不变形可设置mode属性为aspectFit 代码如下: / ...
[echarts] 图表自适应宽高大小
<div class="echart-wrap" :ref="wrapId" :id="wrapId" ><div :re ...

CSS 实现自适应宽高的正圆

CSS 实现自适应宽高的正圆

代码

Refernce

CSS 实现自适应宽高的正圆相关推荐

最新文章

热门文章