如何用css做一个正方形（自适应屏幕宽度）

最新推荐文章于 2024-07-25 09:45:35 发布

zhaohanqq

最新推荐文章于 2024-07-25 09:45:35 发布

阅读量2.1k

点赞数 1

分类专栏： css 文章标签：自适应屏幕的正方形

本文链接：https://blog.csdn.net/zhaohanqq/article/details/86096460

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM结构

<div class="img-container">
   <div class="img-box">
      <img src="xxx" />
   </div>
</div>

css / less

.img-container {
      position: relative;
      width: 40%;
      height: 0px;
      padding-top: 40%;
      .img-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }