摘自: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. RN-TextInput组件去掉下划线

    <View style={styles.container}> <TextInput style={styles.textInputStyle} underlineColorAndr ...

  2. vue中的路由高亮

  3. NgDL:【第二周】NN基础

    1.计算图的导数计算 正向比如说是计算代价函数值,反向就是增大多少a/b/c对J的影响,也就是导数的意义,这里讲的是求导链式法则. 2.向量化 节约大量计算时间 简直是100倍的时间,看来之前实现的那 ...

  4. 【LeetCode每天一题】Combination Sum II(组合和II)

    Given a collection of candidate numbers (candidates) and a target number (target), find all unique c ...

  5. Jenkins pipeline 语法详解

    原文地址http://www.cnblogs.com/fengjian2016/p/8227532.html pipeline 是一套运行于jenkins上的工作流框架,将原本独立运行于单个或者多个节 ...

  6. vue滚动事件销毁,填坑

    eg:富文本的头部固定,当滚轮大于200时(举例)固定在浏览器头部,距离大于富文本时,头部消失 效果: 在富文本下面加一个空div 这么写: mounted() { $(window).scroll( ...

  7. keras图像分类参考大神博客总结

    利用keras预加载模型添加新的层来构建自己所需的模型: from keras.layers import GlobalAveragePooling2D,Dense from keras.applic ...

  8. hiho #1014 : Trie树(模板)

    Trie树 [题目链接]Trie树 &题意: 输入 输入的第一行为一个正整数n,表示词典的大小,其后n行,每一行一个单词(不保证是英文单词,也有可能是火星文单词哦),单词由不超过10个的小写英 ...

  9. IntelliJ IDEA 2017.3/2018.1 激活

    传统的License Server方式已经无法注册IntelliJ IDEA2017.3的版本了. http://idea.lanyus.com,这个网站有破解补丁和注册码两种方式,另外http:// ...

  10. uvm设计分析——callback

    uvm_callback,设计者在进行class的function设计时,有意留下的一些hook,总是遍历某个pool中的对象: 使用者在使用时,将实现添加到某个pool中: callback中,最重 ...