div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自: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实现自适应浏览器宽度的正方形的更多相关文章
- 演示:纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- EasyUI设置Layout自适应浏览器宽度和高度
//设置自适应浏览器宽度和高度 function setLayoutHeight() { var height = $(window).height() - 20; $("#main_lay ...
- 【转】纯 CSS 实现高度与宽度成比例的效果
先来演示页面:Demo; 转的内容: 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 C ...
- 解决 图片在div中等比例缩放问题 (未解决:图片比例小于盒子模型时不会自动填充)
如题,该方案仅支持对图片等比例缩放.本文附件地址:https://files.cnblogs.com/files/john69-/background-Img.rar <!DOCTYPE htm ...
- CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度
使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...
- easyui panel自适应浏览器宽度
一.目标效果: 当浏览器窗口大小改变时.panel宽度始终为浏览器宽度的50%,panel高度则根据其中内容的多少而变化,横向竖向滚动条皆不出现.且不需要重新刷新浏览器或者其他js代码 兼容:chro ...
- 纯css 图片自适应居中
html 结构 <div class="container"> <div class="content"></div> &l ...
- 纯 CSS 实现高度与宽度成比例的效果
http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/
- 纯css兼容个浏览器input[type='radio']不能自定义样式
各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异 //html <div class="remember-a ...
随机推荐
- 异常处理的捕捉:try{}catch(异常类 变量)finally{最终执行}
可以对异常进行针对性处理的方式.try{ //需要被检查的异常 }catch(异常类 变量)//该变量用于接收发生的异常{ //处理异常的代码 }finally{ //一定会被执行的代码. }
- Angular知识点
Angular CLI 快速创建Angular 2项目和组件, 压缩打包发布. 7.创建包含html.ts.css文件的命令cd到需要创建文件的目录下面,输入如下命令 ng g c myFile 会自 ...
- openshift 配置ldap认证
master主配置文件: ...... identityProviders: - challenge: true login: true mappingMethod: claim name: Ldap ...
- [LeetCode] 566. Reshape the Matrix_Easy
In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...
- express-generator 自动生成服务器基本文件
(1) 安装 express-generator 构建工具 npm install -g express-generator 在命令行中用 npm 在全局安装 express-generator 脚手 ...
- iOS 开发笔记-加载/初始化
ViewDidLoad 一般我们会在这里做界面上的初始化操作,比如往view中添加一些子视图.从数据库或者网络加载模型数据装配到子视图中 在自定义控制里 initWithFrame:一般用于添加控件, ...
- vue中computed和watch的写法,以及区别
<template> <div class="print"> <div style="color: red"> <p ...
- 图像中的stride含义
这个不是卷积中的步长stride 是另外一个含义, stride = 每个像素所占字节数 * width input stride为我们正常进行卷积时候设置的stride值,output stride ...
- java随机排座位
//打乱学生顺序 Collections.shuffle(); 容我记个单词 peer: vi.凝视; 盯着看; 隐退,若隐若现; 同等,比得上;n.同辈,同等的人; 贵族; 同伴,伙伴;adj.贵族 ...
- 38.html----相对于父元素的fixed定位的实现
之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元素跟着一起 ...