css实现自适应正方形

这里介绍7种方法，仅供参考。

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%;
}

转载于:https://www.cnblogs.com/camille666/p/css_square.html

css实现自适应正方形相关推荐

面试题19：CSS实现自适应正方形
面试官:请说一下如何实现自适应正方形纯CSS实现自适应正方形的几种方式在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等方法一: 原理同paddi ...
html如何用百分百制作正方形,纯CSS实现自适应正方形
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 首先,自适应正方形是指宽度和高度随着屏幕宽度(不管是移动端还是 PC 端)进行等比例变化的正方形,在处理移动端页面时,我 ...
html div 正方形,纯 CSS 实现自适应正方形
在处理移动端页面时,我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果,如 Flipbord 的移动页面: 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢? 方案 ...
html怎么做一个正方形,纯 CSS 实现自适应正方形
在处理移动端页面时,我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果,如 Flipbord 的移动页面: 那么应该怎么使用纯 CSS 制作出能够自适应大小的正方形呢? 方案 ...
CSS 实现自适应正方形
1.直接采用vw布局
纯CSS实现正方形、自适应正方形方法
纯CSS实现自适应正方形的几种方式在写页面布局时候正方形对我们来说应该很常见,比如商品列表展示,头像展示, 在微博上发布图片的展现等正方形用固定的形式写很简单直接长＝宽写固定的值如下 <d ...
CSS实现自适应浏览器宽度的正方形
2019独角兽企业重金招聘Python工程师标准>>> CSS实现自适应浏览器宽度的正方形有以下三种方法: 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分 ...
CSS 实现自适应宽高的正圆
CSS 实现自适应宽高的正圆利用CSS伪元素增加父元素的高度,使其变成一个正方形代码 <span class="circle-container"><span ...
css 图片自适应_104道 CSS 面试题，助你查漏补缺（下）
(给前端大全加星标,提升前端技能) 作者:CavsZhouyou https://github.com/CavsZhouyou/Front-End-Interview-Notebook/blob/ma ...

css实现自适应正方形

css实现自适应正方形相关推荐

最新文章

热门文章