css实现未知宽度的正方形需求

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

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

demo如下

<!DOCTYPE html>

<html>

<head>

<title>test</title>

</head>

<body>

<style type="text/css">

*{

margin:0;

padding:0;

}

.img{

display:inline-block;

margin: 1%;

width: 30%;

background: #ff6600;

}

.img img{

width: 100%;

display: block;

}

</style>

<div class="img">

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMDYvMTVjL2fvAAAADUlEQVQImWP4//8/AwAI/AL+hc2rNAAAAABJRU5ErkJggg==" />

</div>

<div class="img">

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMDYvMTVjL2fvAAAADUlEQVQImWP4//8/AwAI/AL+hc2rNAAAAABJRU5ErkJggg==" />

</div>

<div class="img">

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDMvMDYvMTVjL2fvAAAADUlEQVQImWP4//8/AwAI/AL+hc2rNAAAAABJRU5ErkJggg==" />

</div>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

<title>test</title>

</head>

<body>

<style type="text/css">

*{

margin:0;

padding:0;

}

.box{

display:inline-block;

margin: 1%;

width: 30%;

background: #ff6600;

}

.box::after{

display: block;

padding-top: 100%;

content : '';

}

</style>

<div class="box">

</div>

<div class="box">

</div>

<div class="box">

</div>

</body>

</html>

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

Bootstrap框架

Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的...

3836
来自专栏编程微刊

前端切图:自制简易音乐播放器

1914
来自专栏lzj_learn_note

前端开发学习──初识Html

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

602
来自专栏用户2442861的专栏

HTML中使背景图片自适应浏览器大小

1、图片不够大,又background属性不能拉伸图片; 2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<...

741
来自专栏编程微刊

七个帮助你处理Web页面层布局的jQuery插件

1392
来自专栏GIS讲堂

结合Jqery UI autocomplete实现featurelayer关键词的查询与展示

本文讲述结合Jquery UI autocomplete实现在文本框中输入关键字,查询featurelayer并将结果以列表的形式展示出来,点击某一列表在地图中...

872
来自专栏一“技”之长

Bootstrap响应式前端框架笔记十一——分页与标签

    在开发搜索结果页、列表页时通常会使用到分页器控件,Bootstrap中提供了方便的类来进行分页器的创建,示例如下:

963
来自专栏代码GG之家

SDL系列讲解(八) SDL_ttf教程

关于游戏开发,当前还在调试,一款移植的随后先推出,自己开发的需要稍等几周,近期比较忙,时间不充裕,大家谅解。同时,对于android开发中的任意问题,可以留言,...

2175
来自专栏葡萄城控件技术团队

MultiRow发现之旅(三)- 模板管理器和Table

前文回顾 MultiRow发现之旅(一)- 高效模板设计器 MultiRow发现之旅(二)- 详解属性管理器 模板管理器 当模板中Cell比较多的时候,你往...

17610
来自专栏企鹅号快讯

《小白HTML5成长之路31》半透明背景的自定义弹窗是怎么用CSS布局的

北方的冬天最怕有风,空气虽然好了,但是异常的冷,吸几口冷风感觉肺都结了冰。一大早小白来到办公室琢磨用户交互方面的问题,看了几个网站发现很多网站的弹窗都是自定义的...

1989

扫码关注云+社区