| 纯CSS实现正方形、自适应正方形方法 | 您所在的位置：网站首页 › 手机上正方形的按键有什么用 › 纯CSS实现正方形、自适应正方形方法 |
纯CSS实现正方形、自适应正方形方法
|
纯CSS实现自适应正方形的几种方式
在写页面布局时候正方形对我们来说应该很常见，比如商品列表展示，头像展示， 在微博上发布图片的展现等 正方形用固定的形式写很简单 直接长＝宽写固定的值如下 .square{ width:200px; height:200px; background:#ccc; }
方法一： 利用.CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width hello,viewport .square { width: 50%; height: 50vw; background: #ccc; }方法二： 设置垂直方向的padding撑开容器(padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width） .square2{ width: 50%; padding-bottom:100%; height：0； }在这里需要注意一下，如果不写hegith的话，正方形内文字会溢出，溢出的高度正好就是文字所占空间的高度。 有的人肯定会想padding-bottom换成padding-top可以吗，那我们就来试试 .square3{ width: 50%; padding-top:100%; height：0； }可以看出来在正方形中有内容的时候，内容会在正方形外面，这是因为默认文字是从左到右，从上到下的排列所以paddin-top以后文字会在正方形外面,如果就想用padding-top来写那么请看方法三 方法三： 利用双层嵌套来写，将外层的div的position设置relative，内层的position设置为absoult，利用绝对定位消除空间占用 分别看设置成padding-top／padding-bottom的效果 内容 内容 .square3{ padding-bottom:100%; height: 0; background:#ccc; width: 50%; position: relative; } .square3-2{ padding-top:100%; height: 0; background:#ccc; width: 50%; position: relative; } .con{ position: absolute; width: 100%; height: 100%; }运行之后我们发现写padding-top还是不可以，我们来检查代码发现，在写内层的div时候没有给top，left的值，让我们把top，left加上再看看 .con{ position: absolute; width: 100%; height: 100%; top:0; left:0; }所以如果用padding-top的时候一定要记得添加top，left 还可以利用伪元素 伪元素 伪元素 .square4 { width: 100%; background: #ccc; } .square4:after { content: ''; display: block; padding-top: 100%; } .con{ width: 100%; height: 100%; position: absolute; }其实我们平时再用到正方形的时候比较多的情况是图片，让图片正方形且自适应，下面也列出了几种方法 方法一： 通过style:background的方式写在标签内部 .square1{ width: 50%; padding-top:100%;/*padding-bottom:100%也可以*/ height: 0; /*可不写*/ }这里写padding-top/bottom 都可以，height也可以不写高度运行效果如下： 方法二： 用img的是形式 .squareimg{ width: 100%; height: 100%; } .square2{ padding-bottom:100%; height: 0; width: 50%; position: relative; } .square2 .con{ position: absolute; width: 100%; height: 100%; top:0; left:0; }运行效果如下： 运行之后发现img写出来的图片如果是长方形的不能够像background一样显示居中，那么此时有一个属性就要起作用啦 “object-fit” .squareimg{ width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }object-fit： 指定替换元素的内容应该如何适应到其使用的高度和宽度确定的，具体属性如下 /* 关键属性 */ object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: sca le-down; /* 全局属性 */ object-fit: inherit; object-fit: initial; object-fit: unset; 具体用法推荐： http://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/ https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit 方法三： 还是img的形式，只不过在方法二的基础上拿掉了一层(class＝“con”）的div，直接将图片绝对定位，具体代码如下 .square3{ padding-bottom:100%; height: 0; position: relative; } .squareimg2{ position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }以上是用padding-top/bottom实现的方法，其实用marign-top/bottom也是可以实现的，我简单了写了几个例子 方法一 .square1{ width:100%; overflow: hidden;/*是为了防止margin塌陷,触发BFC*/ background: #ccc; } .con{ width: 100%; margin-top:100%;/*margin-bottom：100%*/ }此方法在正方形内部写内容时候还是会有溢出的问题，但是用行内样式style：backgound的方式写图片是没问题的 方法二： .square2{ width: 100%; position: relative; overflow: hidden;/*是为了防止margin塌陷,触发BFC*/ } .con2{ width: 100%; margin-bottom: 100%; height: 0; } .img{ width: 100%; height: 100%; position: absolute; z-index: 0; top: 0;/*margin-top:100%必须添加top值*/ left: 0;/*margin-top:100%必须添加left值*/ }如果想在正方形中写入文子内容，将img换成html中其他标签即可。 方法三 利用伪元素 伪元素 伪元素 .square3 { width: 100%; overflow: hidden; background: #ccc; } .square3:after { content: ''; display: block; margin-top: 100%; /* margin 百分比相对父元素宽度计算 */ } .con{ width: 100%; height: 100%; position: absolute; }想要用伪元素的方式在正方形中写入文字等内容，需要写一个独立的块然后利用绝对定位消除空间占用。 以上就是我能想到的一些方法，如果有什么错误的地方还请各位大侠不吝赐教。 综合上面的方法，我写了一个简单的列表demo 例子 html { background-color: #ffffff; font-size: 14px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-weight: normal; overflow: auto; } body { font-size: 14px; font-family: 微软雅黑; } @media only screen and (min-width: 768px) { body { width: 768px; margin: 0 auto } } * { padding: 0; margin: 0; } .content { padding: 10px; overflow: hidden; } .content .item { float: left; margin-left: 10px; width: calc(50% - 5px); overflow: hidden; position: relative; } .content .item:nth-child(odd) { margin-left: 0 } .content .top { width: 100%; padding-bottom: 100%; height: 0; } .content .txt { padding: 5px; } 文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字 |
这样写没有问题，但是如果想在移动端实现宽度自适应呢，利用javascript会不会有点太麻烦啦，确实很麻烦啦，那么就让我们用纯CSS的方式来实现一下
【本文地址】