css自适应正方形的方案

syoya 发布于2019-08-29 11:14 / 1866人阅读

摘要：网上搜罗的一个方法，利用代码如下，不过本人木有实现成功，欢迎大家留言已实现成功的。并且这个方法兼容性目前来说还较差。所以放在最后一个，不太推荐，不过还是很好奇，这个东西是怎么实现的。

经过搜索查找，总结几种常用的css自适应的正方形的解决方案： html代码：

以下为几种解决方案：

利用padding-bottom:100%撑开，如果无内容可不设置height:0;这一项，如果有内容的情况下还想保持为正方形，则需要设置height:0;

    .z{
        width: 100%;
        padding-bottom: 100%;
        border: 1px solid red;
        height: 0;   
     }

利用after伪类,先存在问题是，如果加入内容则高度会被撑开，而设置height:0并不能解决这一问题，有待研究，如果大家有好的方案，可以留言

.z {
    width: 100%;
    border: 1px solid red;   }
     .z:after {
    content: "";
    display: block;
    margin-top: 100%;   
}

利用padding:50% 0;原理和padding-bottom:100%大致相似，但是此处如果有内容则是从div的一半处开始。

      .z {
        width: 100%;
        padding: 50% 0;
        border: 1px solid red;
        height: 0;
      }

网上搜罗的一个方法，利用vm,代码如下，不过本人木有实现成功，欢迎大家留言已实现成功的demo。并且这个方法兼容性目前来说还较差。所以放在最后一个，不太推荐，不过还是很好奇，这个东西是怎么实现的。

    .z {
        width: 100%;
        height: 100vm;
        border: 1px solid red;   
    }

超融合服务器专线服务 css自适应 css图片自适应 asp 自适应css 自适应阈值的流量算法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111518.html

纯 CSS 实现自适应正方形

摘要：如果需求是制作相对视口高度自适应的正方形，估计就只能使用单位了吧转自纯实现自适应正方形在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面：showImg(https://segmentfault.com/img/bVNVjL?w=377&h=666); 那么应该怎么使用纯 CSS 制作出能够自适应大小的正...

Freelander 2019-08-29 12:36 评论0 收藏0
纯 CSS 实现自适应正方形

摘要：如果需求是制作相对视口高度自适应的正方形，估计就只能使用单位了吧转自纯实现自适应正方形在处理移动端页面时，我们有时会需要将 banner 图做成与屏幕等宽的正方形以获得最佳的体验效果，如 Flipbord 的移动页面：showImg(https://segmentfault.com/img/bVNVjL?w=377&h=666); 那么应该怎么使用纯 CSS 制作出能够自适应大小的正...

joyqi 2019-08-01 16:52 评论0 收藏0
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0
真的,移动端尺寸自适应与dpr无关

摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...

omgdog 2019-08-22 18:19 评论0 收藏0