方案一:CSS3 vw 单位

CSS3 中新增了一组相对于可视区域百分比的长度单位vw、vh、vmin、vmax。其中vw是相对于视口宽度百分比的单位,1vw = 1% viewport width,vh是相对于视口高度百分比的单位,1vh = 1% viewport height;vmin是相对当前视口宽高中较小的一个的百分比单位,同理 vmax是相对当前视口宽高中较大的一个的百分比单位。

 #square{
width:%;
height:30vw;
background:red;
}

办公资源网址导航 https://www.wode007.com

类比:纯CSS实现自适应浏览器高度的正方形只需要设置width的单位为vh即可。

优点:简洁方便。

缺点:浏览器兼容不好。

方案二:设置垂直方向的padding撑开容器

由于margin, padding 的百分比数值是相对父元素的宽度计算的,只需将元素垂直方向的一个padding值设定为与width相同的百分比就可以制作出自适应正方形了。

但要注意,仅仅设置padding-bottom是不够的,若向容器添加内容,内容会占据一定高度,为了解决这个问题,需要设置height: 0。

 #square{
width:%;
height:;
padding-bottom: %;
background:red;
}

优点:简洁明了,且兼容性好。

缺点:会导致在元素上设置的max-width属性失效(max-height不收缩)。

方案三:利用伪元素的 margin(padding)-top 撑开容器

max-width属性失效的原因是:max-width属性只限制于width,也就是只会对元素的 content width起作用。

解决方法是:用一个子元素撑开content部分的高度,从而使max-height属性生效。

首先需要设置伪元素,其内容为空,margin-top设置为100%。

但要注意,若使用垂直方向上的margin撑开父元素,仅仅设置伪元素是不够的,这涉及到margin collapse外边距合并的概念,由于容器与伪元素在垂直方向发生了外边距合并,所以撑开父元素高度并没有出现,解决方法是在父元素上触发BFC:设置overflow:hidden。

 #square{
width:%;
background:red;
overflow:hidden;
max-width:200px;
}
#square:after{
content: '';
display: block;
margin-top:%;
}

若使用垂直方向上的padding撑开父元素,则不需要触发BFC。

 #square{
width:%;
background:red;
max-width:200px;
}
#square:after{
content: '';
display: block;
padding-top:%;
}

css实现自适应正方形的多种方法实现的更多相关文章

  1. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

  2. css隐藏页面元素的多种方法

    在平常的样式排版中,我们经常遇到将某个模块隐藏,下面我整理了一下隐藏元素的多种方法以及对比(有的占据空间,有的不占据空间.有的可以点击,有的不能点击.): ( 一 )  display:  none; ...

  3. css实现自适应正方形的方法

    页面布局中,我们经常需要用百分比来实现宽度自适应,但是如果这时候高度要跟宽度呈固定比例变化,该怎么办呢? 很简单,我们可以利用元素的padding或margin的百分比值是参照父元素的宽度这一特性来实 ...

  4. css实现自适应正方形

    这里介绍7种方法,仅供参考. 1.vm单位 <div class="square-shape">这是一个可以自适应的正方形,此法适用于移动端web页面.</div ...

  5. CSS 实现自适应正方形

    在处理移动端页面时,我们有时会需要将banner图做成与屏幕等宽的正方形以获得最佳的体验效果,比如,商品详情页, 方法1.CSS3 vw单位 CSS3 中新增了一组相对于可视区域百分比的长度单位 vw ...

  6. iframe自适应高度的多种方法小结

    转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...

  7. iframe自适应高度的多种方法方法小结

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...

  8. iframe自适应高度的多种方法方法小结(转)

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

  9. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

随机推荐

  1. Java实现除去次方数

    ** 除去次方数** 自然数的平方数是:1 4 9 16 25 - 自然数的立方数是:1 8 27 64 125 - 自然数的4次方数是:1 16 81 256 - - 这些数字都可以称为次方数. 1 ...

  2. java实现第二届蓝桥杯最小公倍数(c++)

    最小公倍数. 为什么1小时有60分钟,而不是100分钟呢?这是历史上的习惯导致. 但也并非纯粹的偶然:60是个优秀的数字,它的因子比较多. 事实上,它是1至6的每个数字的倍数.即1,2,3,4,5,6 ...

  3. 注解实现SpringCache自定义失效时间

    注解实现SpringCache自定义失效时间 SpringCache是一个很方便的缓存框架,但是官方提供的缓存的配置只有全局的缓存失效时间,没有针对某个命名空间做配置,因为工作上业务的关系需要针对某一 ...

  4. 第一个SpringMVC程序 (配置版)

    通过配置版本的MVC程序,可以了解到MVC的底层原理,实际开发我们用的是注解版的! 1.新建一个普通Maven的项目,然后添加web的支持 2.导入相关的SpringMVC的依赖 3.配置web.xm ...

  5. node实现批量修改图片尺寸

    前言 大家在工作中肯定有没有遇到过图片尺寸和我们要求的尺寸不一致的情况吧?通常我们会在网上找一下找在线的或者下载一个小工具,再或者通过ps的批处理解决.但是,作为程序猿,当然还是通过代码来解决这种小问 ...

  6. JavaScript 定时器 取消定时器

    感谢:链接(视频讲解很清晰) 定时器:作用主要是一定时间间隔后,做出相关的变化,例如图片轮播. 目录 两种定时器的使用 两种定时器区别 取消定时器的方法 两种定时器的使用: 方法一:setTimeou ...

  7. cookie与session区别?

    参考 cookie与session的区别是什么 Java中Cookie的使用(Cookie 和Session的区别) 什么是会话? 用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭 ...

  8. [问题解决]coding时修改代码键入前边后边的自动删除

    问题原因:误按下键盘上的Insert键 解决办法:再按一下即可

  9. vulstack红队评估(三)

    一.环境搭建: ①根据作者公开的靶机信息整理 没有虚拟机密码,纯黑盒测试...一共是5台机器,目标是拿下域控获取flag文件   ②虚拟机网卡设置 centos双网卡模拟内外网: 外网:192.168 ...

  10. HTML5如何垂直居中一个浮动元素

    html如何垂直居中一个浮动元素//方法一:已知元素的高宽#div1{background-color:#6699FF;width:200px;height:200px;position:absolu ...