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

相关文章

来自专栏小筱月

animate 动画滞后执行的解决方案

针对 jQuery 中 slideUp、slideDown、animate 等动画运用时出现的滞后反复执行等问题的解决方法有如下:

2001
来自专栏姬小光

【第012期】如何设置页面锚点

不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

1033
来自专栏自动化测试实战

HTML第一课——基础知识普及【2】

2046
来自专栏河湾欢儿的专栏

选中分享

751
来自专栏无所事事者爱嘲笑

react-native flatlist 上拉加载onEndReached方法频繁触发的问题

6552
来自专栏无原型不设计

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

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

3536
来自专栏十月梦想

bootstrap按钮

bootstrap提供了其中按钮样式:默认(.btn-default),主要(.btn-primary),成功(.btn-success),警告(.btn-wa...

936
来自专栏听雨堂

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

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

2025
来自专栏pangguoming

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

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

4735
来自专栏源码之家

博看网杂志下载时批量更改图片大小

1102

扫码关注云+社区