纯CSS实现正方形、自适应正方形方法 |
您所在的位置:网站首页 › 怎么画重叠的正方形图片简单 › 纯CSS实现正方形、自适应正方形方法 |
纯CSS实现自适应正方形的几种方式
在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等 正方形用固定的形式写很简单 直接长=宽写固定的值如下 .square{ width:200px; height:200px; background:#ccc; }这样写没有问题,但是如果想在移动端实现宽度自适应呢,利用javascript会不会有点太麻烦啦,确实很麻烦啦,那么就让我们用纯CSS的方式来实现一下 方法一: 利用.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; } 文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |