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 条评论
登录 后参与评论

相关文章

来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结 【原创】

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

1133
来自专栏韩东吉的Unity杂货铺

零基础入门 10: 编辑器下的UGUI Image

Image组件是Unity里显示图片的组件,可以将Sprite类型的图片显示在Canvas下。

1231
来自专栏React Native开发圈

React Native 圆形进度条组件

npm i--save react-native-circular-progress

1771
来自专栏腾讯云商业智能分析团队的专栏

普通表格常见设置

表格组件是以表格的形式展现数据的载体,表格可以绑定任意一查询的多个字段。根据是否给字段使用统计函数来区分,可划分为细节数据表格和汇总表格。

2141
来自专栏微信小程序开发

小程序中图片高度等比缩放

前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩...

58410
来自专栏无原型不设计

Mockplus实例之一看就会de五个交互功能

实例来源:豆瓣新加日记(https://www.douban.com/note/create) 先看看豆瓣新加日记的网页: ? 再看看已经制作好的原型预览...

5606
来自专栏禅林阆苑

前端拾零01—checkbox&radio&select总结

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

2K66
来自专栏听雨堂

用CSS制作可交换带事件处理的图片按钮

      按钮是网页最常用的控件了,怎样设计一个更好看的按钮,这两天试验了几种方法:       1、用Javascript交换图片的方式先在网页中制作图片,...

2225
来自专栏前端侠2.0

转:为什么 $("a").click()无效

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

5433
来自专栏pangguoming

使用svgdeveloper 和 svg-edit 绘制svg地图

目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一、SVGDeveloper 5. 方法二、SVG-Edit 1. 描述 有...

5515

扫码关注云+社区

领取腾讯云代金券