摘自:https://blog.csdn.net/u010513603/article/details/78200207

1、方案一:CSS3 vw 单位

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

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

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

优点:简洁方便。

缺点:浏览器兼容不好。

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

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

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

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

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

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

3、利用伪元素的 margin(padding)-top 撑开容器

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

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

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

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

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

若使用垂直方向上的padding撑开父元素,则不需要触发BFC。子元素的100%就相当于父元素的30%

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

div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形的更多相关文章

  1. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. EasyUI设置Layout自适应浏览器宽度和高度

    //设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...

  3. 【转】纯 CSS 实现高度与宽度成比例的效果

    先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...

  4. 解决 图片在div中等比例缩放问题 (未解决:图片比例小于盒子模型时不会自动填充)

    如题,该方案仅支持对图片等比例缩放.本文附件地址:https://files.cnblogs.com/files/john69-/background-Img.rar <!DOCTYPE htm ...

  5. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  6. easyui panel自适应浏览器宽度

    一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...

  7. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  8. 纯 CSS 实现高度与宽度成比例的效果

    http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/

  9. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

随机推荐

  1. PHP的类,abstract类,interface及关键字extends和implements

    原文:https://blog.csdn.net/qq_19557947/article/details/77880757?locationNum=4&fps=1 PHP类 PHP类是单继承, ...

  2. Java创建文件夹

    import java.io.File; public class Mkdirs { public static void main(String[] args) { /** *创建文件夹,如果路径不 ...

  3. 【EatBook】-NO.1.EatBook.1.JavaData.1.001-《JSON 必知必会-Introduction to JavaScript Object Notation》-

    1.0.0 Summary Tittle:[EatBook]-NO.1.EatBook.1.JavaData.1.001-<JSON 必知必会-Introduction to JavaScrip ...

  4. vue2.3时使用手机调试,提示媒体已断开的解决方案

    参考链接:http://www.xitonghe.com/jiaocheng/windows7-9623.html 1.在当前版本vue下开发,发现只能在localhost时调试,不能使用电脑的ip, ...

  5. mac book docker

    mbp的某些方面还是挺有吸引力的啊 但工作中大多数用的还是纯linux而不是类unix的mac os,要在家里的mac os x 和linux之间转转弯,有时候想想还是挺别扭的. 为了从公司-> ...

  6. ROSETTA使用技巧随笔--Full Atom Representation和Centroid Representation

    Full Atom Representation vs Centroid Representation Full Atom Representation即全原子标识,氨基酸残基的所有相关原子,均原封不 ...

  7. Request.UrlReferrer注意点

    定义: public sealed class HttpRequest { // // 摘要: // 获取有关客户端上次请求的 URL 的信息,该请求链接到当前的 URL. // // 返回结果: / ...

  8. sqli-labs(十二)(union以及select的过滤)

    第二十七关: 这关禁用了空格和select,空格还是可以使用()代替,select发现可以大小写绕过 输入?id=1'||extractvalue(1,concat(0x5c,(selEct(grou ...

  9. 大数据-05-Spark之读写HBase数据

    本文主要来自于 http://dblab.xmu.edu.cn/blog/1316-2/ 谢谢原作者 准备工作一:创建一个HBase表 这里依然是以student表为例进行演示.这里假设你已经成功安装 ...

  10. python爬虫-基础入门-爬取整个网站《3》

    python爬虫-基础入门-爬取整个网站<3> 描述: 前两章粗略的讲述了python2.python3爬取整个网站,这章节简单的记录一下python2.python3的区别 python ...