前端面试：如何实现自适应正方形？

最新推荐文章于 2024-05-17 14:32:46 发布

VIP文章刷题刷到手抽筋

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量805

点赞数

文章标签：前端面试 css3

本文链接：https://blog.csdn.net/doomliu/article/details/124770133

版权

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

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

有两种方式，

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #block1 {
        width: 100px;
      }
      .block1-wrapper {
        width: 100%;
        height: 0px;
        background-color: red;
        padding-bottom: 100%;
      }
      
      
      #block2 {
        width: 100px;
      }
      .block2-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        background-color: blue;
      }

最低0.47元/天解锁文章

刷题刷到手抽筋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试：如何实现自适应正方形？

实现自适应的正方形效果，即让元素高度随宽度改变。实现的思路是父元素设置宽度，子元素宽度100%，然后控制子元素撑开父元素的高度，撑开的高度和宽度成一定比例。正方形就是1:1，其他比例的实现原理相同。有两种方式，一种是使用子元素的padding-top或者padding-bottom撑开父元素高度，因为子元素的padding的百分比是相对于父元素的宽度。另一种方法是用子元素的伪类将父元素高度撑开。【前端面试刷题网站：灵题库，收集大厂面试真题，相关知识点详细解析。】<!DOCTYPE ht
复制链接

扫一扫