纯CSS实现正方形、自适应正方形方法

最新推荐文章于 2024-09-12 20:44:43 发布

Zangxjun

最新推荐文章于 2024-09-12 20:44:43 发布

阅读量3.5w

点赞数 25

分类专栏： css web前端 css3 web

本文链接：https://blog.csdn.net/ztj771299799/article/details/79806769

版权

css 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

web前端

3 篇文章 0 订阅

订阅专栏

web

2 篇文章 0 订阅

订阅专栏

纯CSS实现自适应正方形的几种方式

在写页面布局时候正方形对我们来说应该很常见，比如商品列表展示，头像展示，在微博上发布图片的展现等
这里写图片描述

正方形用固定的形式写很简单直接长＝宽写固定的值如下

<div class="square"></div>
.square{
    width:200px; 
    height:200px;
    background:#ccc;
    }

这里写图片描述
这样写没有问题，但是如果想在移动端实现宽度自适应呢，利用javascript会不会有点太麻烦啦，确实很麻烦啦，那么就让我们用纯CSS的方式来实现一下

方法一：
利用.CSS3 vw 单位，vw是相对于视口的宽度。视口被均分为100单位的vw。1vw = 1% viewport width

<div class="square">hello,viewport</div>
<style>
.square {
        width: 50%;
        height: 50vw;
        background: #ccc;
  }
 </style>

方法二：
设置垂直方向的padding撑开容器(padding可以用百分比，百分比是根据它包含块的width来确定的，也就是父级元素的width）

<div class="square2"></div>
<style>
.square2{ 
    width: 50%;
    padding-bottom:100%; 
    height：0；
    }
</style>

在这里需要注意一下，如果不写hegith的话，正方形内文字会溢出，溢出的高度正好就是文字所占空间的高度。
这里写图片描述

有的人肯定会想padding-bottom换成padding-top可以吗，那我们就来试试

<div class="square2"></div>
<style>
.square3{ 
    width: 50%;
    padding-top:100%; 
    height：0；
    }
</style>

这里写图片描述

可以看出来在正方形中有内容的时候，内容会在正方形外面，这是因为默认文字是从左到右，从上到下的排列所以paddin-top以后文字会在正方形外面,如果就想用padding-top来写那么请看方法三

方法三：

利用双层嵌套来写，将外层的div的position设置relative，内层的position设置为absoult，利用绝对定位消除空间占用
分别看设置成padding-top／padding-bottom的效果

<div class="square3">
    <div class="con">
        内容
    </div>
</div> 
<div class="square3-2">
    <div class="con">
        内容
    </div>
</div> 
<style>
.square3{
    padding-bottom:100%;
    height: 0;
    background:#ccc;
    width: 50%;
    position: relative;
} 
.square3-2{
    padding-top:100%;
    height: 0;
    background:#ccc;
    width: 50%;
    position: relative;
}  
.con{
    position: absolute;
    width: 100%;
    height: 100%; 
} 
</style>

这里写图片描述

运行之后我们发现写padding-top还是不可以，我们来检查代码发现，在写内层的div时候没有给top，left的值，让我们把top，left加上再看看

<style>
.con{
    position: absolute;
    width: 100%;
    height: 100%; 
    top:0;
    left:0; 
}
</style>

这里写图片描述

所以如果用padding-top的时候一定要记得添加top，left

还可以利用伪元素

<div class="square4">
   伪元素
</div>

<div class="square4">
    <!-- 利用绝对定位 -->
    <div class="con">伪元素</div>
</div> 
<style>
  .square4 {
      width: 100%; 
      background: #ccc;
  }
  .square4:after {
      content: '';
      display: block;
      padding-top: 100%;  
  } 
  .con{
      width: 100%;
      height: 100%;
      position: absolute; 
  }
</style>

这里写图片描述

其实我们平时再用到正方形的时候比较多的情况是图片，让图片正方形且自适应，下面也列出了几种方法

方法一：
通过style:background的方式写在标签内部

<div class="square1" style="background: url(images/square.jpg)no-repeat center /cover"></div> 
<style>
.square1{
   width: 50%;
   padding-top:100%;/*padding-bottom:100%也可以*/
   height: 0;  /*可不写*/
}
</style>

这里写padding-top/bottom 都可以，height也可以不写高度运行效果如下：
这里写图片描述

方法二：
用img的是形式

<div class="square2">
    <div class="con">
        <img src="images/square.jpg" class="squareimg"/>
    </div>
</div>
<style>
 .squareimg{
    width: 100%;
    height: 100%;
}
.square2{
    padding-bottom:100%;
    height: 0;
    width: 50%;
    position: relative;
}
.square2 .con{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
}
</style>

运行效果如下：
这里写图片描述

运行之后发现img写出来的图片如果是长方形的不能够像background一样显示居中，那么此时有一个属性就要起作用啦 “object-fit”

<style>
 .squareimg{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
} 
</style>

object-fit：
指定替换元素的内容应该如何适应到其使用的高度和宽度确定的，具体属性如下
/* 关键属性 */
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: sca

le-down;
/* 全局属性 */
object-fit: inherit;
object-fit: initial;
object-fit: unset;

方法三：
还是img的形式，只不过在方法二的基础上拿掉了一层(class＝“con”）的div，直接将图片绝对定位，具体代码如下

<div class="square3"><img src="images/square.jpg" style="width:100%;" class="squareimg2"/></div>
<style>
.square3{
    padding-bottom:100%;
    height: 0;
    position: relative;
} 
.squareimg2{
    position: absolute;
    width: 100%;
    height: 100%; 
    -o-object-fit: cover;
    object-fit: cover;
}
</style>

以上是用padding-top/bottom实现的方法，其实用marign-top/bottom也是可以实现的，我简单了写了几个例子

方法一

<div class="square1">
   <div class="con"></div>
</div>
<style>
 .square1{
        width:100%;
        overflow: hidden;/*是为了防止margin塌陷,触发BFC*/
        background: #ccc;
    }
   .con{
       width: 100%;
       margin-top:100%;/*margin-bottom：100%*/
   }
 </style>

此方法在正方形内部写内容时候还是会有溢出的问题，但是用行内样式style：backgound的方式写图片是没问题的
这里写图片描述

方法二：

 <div class="square2">
            <div class="con2">
                   <img src="images/square.jpg" class="img"/>
            </div>
  </div>
  <style>
   .square2{
        width: 100%;
        position: relative;
        overflow: hidden;/*是为了防止margin塌陷,触发BFC*/
    }
    .con2{
        width: 100%;
        margin-bottom: 100%;
        height: 0;
    }

    .img{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        top: 0;/*margin-top:100%必须添加top值*/
        left: 0;/*margin-top:100%必须添加left值*/  
    }
 </style>

如果想在正方形中写入文子内容，将img换成html中其他标签即可。

方法三
利用伪元素

<div class="square3">
   伪元素
</div>

<div class="square3">
    <!-- 利用绝对定位 class="con" 的 div-->
    <div class="con">伪元素</div>
</div> 
<style>
  .square3 {
      width: 100%;
      overflow: hidden;
      background: #ccc;
  }
  .square3:after {
      content: '';
      display: block;
      margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
  } 
  .con{
      width: 100%;
      height: 100%;
      position: absolute; 
  }
</style>

想要用伪元素的方式在正方形中写入文字等内容，需要写一个独立的块然后利用绝对定位消除空间占用。

以上就是我能想到的一些方法，如果有什么错误的地方还请各位大侠不吝赐教。

综合上面的方法，我写了一个简单的列表demo

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <meta http-equiv="Pragram" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
</head>
<title>例子</title>
<style>
    html {
        background-color: #ffffff;
        font-size: 14px;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
        font-weight: normal;
        overflow: auto;
    }

    body {
        font-size: 14px;
        font-family: 微软雅黑;
    }

    @media only screen and (min-width: 768px) {
        body {
            width: 768px;
            margin: 0 auto
        }
    }

    * {
        padding: 0;
        margin: 0;
    }

    .content {
        padding: 10px;
        overflow: hidden;

    }

    .content .item {
        float: left;
        margin-left: 10px;
        width: calc(50% - 5px);
        overflow: hidden;
        position: relative;
    }

    .content .item:nth-child(odd) {
        margin-left: 0
    }

    .content .top {
        width: 100%;
        padding-bottom: 100%;
        height: 0;
    }

    .content .txt {
        padding: 5px;
    }

</style>
</head>
<body>
<ul class="content">
    <li class="item">
        <div class="top" style="background: url(images/square.jpg)no-repeat center /cover"></div>
        <p class="txt">
            文字文字文字文字文字文字文字文字
        </p>
    </li>
    <li class="item">
        <div class="top" style="background: url(images/square.jpg)no-repeat center /cover"></div>
        <p class="txt">
            文字文字文字文字文字文字文字文字
        </p>
    </li>
    <li class="item">
        <div class="top" style="background: url(images/square.jpg)no-repeat center /cover"></div>
        <p class="txt">
            文字文字文字文字文字文字文字文字
        </p>
    </li>
    <li class="item">
        <div class="top" style="background: url(images/square.jpg)no-repeat center /cover"></div>
        <p class="txt">
            文字文字文字文字文字文字文字文字
        </p>
    </li>
</ul>
</body>
</html>