css实现自适应正方形
2016-11-05 10:12
453 查看
这里介绍7种方法,仅供参考。
1、vm单位
2、padding-top实现
3、padding-bottom实现
4、伪元素的margin-top
5、伪元素的padding-top
6、子元素margin-top
7、伪元素的padding-bottom,内嵌absolute元素
1、vm单位
<div class="square-shape">这是一个可以自适应的正方形,此法适用于移动端web页面。</div> .square-shape { width: 50%; height: 50vw; border: 1px solid #f00; }
2、padding-top实现
<div class="square-shape">这是一个可以自适应的正方形,设置高度避免被内容撑开多余的高度。奇怪的是,内容在框框外面。</div> .square-shape { width: 50%; height: 0; padding-top: 50%; border: 1px solid #f00; }
3、padding-bottom实现
<div class="square-shape">这是一个可以自适应的正方形,此法很好用,有内容也是正方形。</div> .square-shape { width: 30%; height: 0; padding-bottom: 30%; border: 1px solid #f00; }
4、伪元素的margin-top
<div class="square-shape">这里如果有内容,就不是正方形喽,限制height也没有用。</div> .square-shape { width: 100%; overflow: hidden; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; margin-top: 100%; }
5、伪元素的padding-top
<div class="square-shape">这里如果有内容,就不是正方形喽。</div> .square-shape { width: 30%; max-width: 200px; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; padding-top: 100%; }
6、子元素margin-top
<div class="square-shape"> <div class="content">这是一个可以自适应的正方形</div> </div> .square-shape{ overflow: hidden; width: 50%; background-color: black; } .content{ margin-top: 100%; }
7、伪元素的padding-bottom,内嵌absolute元素
<div class="square-shape"> <div class="content">这是一个可以自适应的正方形</div> </div> .square-shape { width: 50%; border: 1px solid #f00; } .square-shape:after { content: ''; display: block; padding-bottom: 100%; } .content { position: absolute; width: 100%; height: 100%; }
相关文章推荐
- 浅谈纯CSS实现自适应浏览器宽度的正方形
- CSS实现自适应浏览器宽度的正方形
- 纯CSS实现自适应正方形
- 纯CSS实现自适应正方形
- 纯css实现自适应正方形
- 纯CSS实现自适应正方形
- 【CSS实现正方形】CSS实现自适应正方形、等宽高比矩形
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
- 奇怪的问题,关于js+css实现页面内容高度自适应的两种解决方案
- CSS实现水平/垂直自适应浏览器居中
- 用CSS实现ul标签中图片与文字底边对齐及自适应高度
- 纯 css 实现 iframe 宽高自适应
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- css实现自适应屏幕高度;
- css:实现图片自适应大小
- CSS实现自适应的图片背景边框代码
- 使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。
- DIV/CSS 实现三列,左右两列固定,中间一列自适应
- CSS实现绿色带阴影自适应宽度的菜单代码
- css实现背景图片自适应大小