如何仅靠CSS画个正方形

众所周知的,css好像没有啥方法能帮助我们限制一个元素的宽高比,前一阵子却有这么个需求,要求我画个正方形。

于是怎么做呢,简答阐述下思路:

第一步,做一个尺寸适当的空白png,要正方的。

塞进div里,对img使用下面的属性:

img{
    width:100%;
    pointer-events:none;
}

这样它就是一个正方形啦 d(`・∀・)b ,为啥呢?因为在页面中如果你只给img施加一个宽度属性高度是会自动按比例调节的,我们在这里就这样利用了下这个特性。(特性:你利用我இдஇ)

之后说下pointer-events,pointer-events是拿来取消所有鼠标响应的,用过这个属性之后,图片的一切鼠标事件都会被取消,比如你要右键存图之类的、拖动这张透明图之类的都不行了。本来我们就不想让用户察觉到这张图的存在,所以才加了这么个属性 d(`・∀・)b 。

第二步,把这个div当作warp,把它的position设置成relative,在这个div里面嵌套一个div,用来放真正的内容,把里面嵌套的这个div的position设置成absolute。

之后用absolute固定他。

具体代码差不多是这个意思:

HTML:

<div class='square_warp'>
    <img src="balabalabala" />
    <div class='content'>
        BALABALABALA
    </div>
</div>

CSS:

.square_warp{
    position:relative;
}

.square>.content{
    left:0;
    top:0;
    position:absolute;
}

完了。

这个方法有个缺点,就是画出来的正方形只是感官上长宽比是1:1,但是实际上还是有点偏差的,你要是非要用纯html/css去实现的话也会让你的html逻辑结构混乱无比。

所以虽然说标题是仅靠CSS去实现这个方法,但是我还是推荐你加点JS进去的((;´༎ຶД༎ຶ`)没错我骗了你)。还是只说思路:

首先:给所有的正方形定义一个class,比如square。

接下来:JS定义一个透明1:1图片:

https://github.com/Losses/Google-Design-Simple/blob/master/js/index.js#L35

代码太长,乱排版,不粘了

说下我为啥要在js里定义空白图片而不是直接插图进去:我洁癖,在文件夹里扔个莫名其妙的文件不开心( ˘・з・)。

第三步,上JQ

$(".square").append('<img src="' + ImgRes + '" />');

之后想怎么办都随你了~