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

相关文章

来自专栏前端知识分享

第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

除了以前学过的:link、:active、:visited、:hover,CSS3又新增了其它的伪类选择器。

873
来自专栏快乐八哥

自定义的html radio button的样式

设计要求效果如下: ? <!-- .csharpcode, .csharpcode pre { font-size: small; color: black...

1726
来自专栏个人随笔

jQuery 选择器

jQuery网页脚本语言核心之一 概述: 1. 选择器是jQuery的基础 2. 对事件处理,遍历DOM和Ajax操作都依赖于选择器 3. 可简化代码 什么是j...

3439
来自专栏行者常至

002.css常用基础知识点

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版...

691
来自专栏CDA数据分析师

【爬虫基础】网页是怎么构成的?

作者 张俊红 本文为 CDA 志愿者张俊红原创作品,转载需授权 所谓的网络爬虫就是从网页中指定位置找到对应的数据并下载,要想知道数据在什么位置,我们需要首...

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

HTML5 & CSS3初学者指南(2) – 样式化第一个网页

介绍 我们已经使用基本的 HTML 编写了一个网页。但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力。 ? 如何改善这种很平淡的页面呢? 让我们开始...

1807
来自专栏mwangblog

正则表达式

在正则表达式中,.匹配除换行符外的任意单个字符,下面的命令从文件water.txt中匹配一个字符串,这个字符串以wa开头,之后是两个任意字符(除换行符),最后是...

491
来自专栏编程之旅

CSS——实现元素的垂直居中

在写CSS的过程中,我常常谷歌一个东西,就是如何实现元素的垂直居中,水平居中难度还不是很大,但是垂直居中我这个烂记性是写一次忘一次,于是本着好记性不如烂笔头的想...

783
来自专栏彭湖湾的编程世界

【CSS/JS】如何实现单行/多行文本溢出的省略(...)--老司机绕过坑道的正确姿势

写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本: 这个文本可能是单行的: ? 也可能是多行的: ? ...

1988
来自专栏Python研发

CSS,注意点!!!!!!!

4、用css给body标签加个 margin:0(用于消除body边框和浏览器间的空白部分)

833

扫码关注云+社区