前端面试:如何实现自适应正方形?

实现自适应的正方形效果,即让元素高度随宽度改变。

实现的思路是父元素设置宽度,子元素宽度100%,然后控制子元素撑开父元素的高度,撑开的高度和宽度成一定比例。正方形就是1:1,其他比例的实现原理相同。

有两种方式,

  • 一种是使用子元素的padding-top或者padding-bottom撑开父元素高度,因为子元素的padding的百分比是相对于父元素的宽度。
  • 另一种方法是用子元素的伪类将父元素高度撑开。

前端面试刷题网站:灵题库,收集大厂面试真题,相关知识点详细解析。】



  
    
    Document