纯css实现长宽等比例的div
现代网站页面基本都需要响应式,一个div的长宽往往我们都设置为百分之多少,这个百分之是相对于父容器动态计算的
这样在浏览器宽度变化之后,我们的元素也能自动更新长宽。例如:我们在页面上摆了一个div,这个宽度设置为20%,
同时又要求div始终保持4:3的长宽比来显示,因为这样看上去可能美观一点。很显然,不能因为宽度是20%了,把高度
设置为15%,这是肯定错误的。通常想到的方法就是用js动态计算,但是在浏览器窗口动态变化的时候,必须在resize的时候
再次更新这个div的高度,这样比较麻烦。
下面用例是用纯CSS控制这个div的长宽比,不论浏览器怎么变化,div实时也会变化,并保持比例不变
<!DOCTYPE html>
<html>
<body>
<div class="contain">
<div class="item">
<div class="verticalCenter horizaCenter box">1</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">2</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">3</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">4</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">5</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">6</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">7</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">8</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">9</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">10</div>
</div>
<div class="item">
<div class="verticalCenter horizaCenter box">11</div>
</div>
</div>
</body>
</html>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.contain {
width: 50vw;/*屏幕宽度的一半*/
height: 70vw;/*屏幕宽度的70%*/
background: red;
}
.item {
float: left;
position: relative;
background-color: darkslategrey;
margin: 10px;
/*这里显示的就是20:15=4:3,以后div就会保持这个比例*/
width: 20%;
padding-bottom: 15%;
}
/*垂直居中*/
.verticalCenter{
display: flex;
align-items:center;
height: 100%;
}
/*水平居中*/
.horizaCenter{
display: flex;
justify-content:center;
text-align: center;
width: 100%;
}
.item .box{
font-size: 1.5rem; width: 100%;height: 100%;background: blue;position: absolute;left: 0;top: 0;border: 1px solid yellow
}
</style>
代码中的vw是viewport的宽度,vh就是高度,这个始终是拿viewport计算的
看下面的效果图(1244X774):
缩小浏览器宽高之后(653X774):
这里主要利用了padding-bottom,这个熟悉的百分比是按照宽度来算的,相当于这个div的高度是0,通过padding-bottom,把div
撑开到我们想要的高度,然后里面再套一个div绝对定位,在套的div里面就可以填任何内容了。
纯css实现长宽等比例的div的更多相关文章
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
- 追求极致--纯css制作三角、圆形按钮,兼容ie6
参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 超简单:纯CSS实现的进度条
——————纯CSS实现的进度条—————— HTML: <div class="wrapper"> <div class="bar"> ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- css样式: 宽高按一定比例进行自适应
纯 CSS 实现高度与宽度成比例的效果 最近在做一个产品列表页面,布局如右图所示.页面中有若干个 item,其中每个 item 都向左浮动,并包含在自适应浏览器窗口宽度的父元素中. item 元素的 ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- 纯css竟可以做出边框这样长宽度的过渡效果
边框效果如下:鼠标移到下面方形,就有效果 要是没有效果,点这个:https://murenziwei.github.io/testGit/Untitled1.html 正如你所看到的,这边框颜色只 ...
- 使用纯 CSS 实现 Google Photos 照片列表布局
文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...
- 纯CSS打造银色MacBook Air(完整版)
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
随机推荐
- sketch 相关论文
sketch 相关论文 Sketch Simplification We present a novel technique to simplify sketch drawings based on ...
- mysql删除表中的记录
大家都知道,在MySQL中删除一个表中的记录有两种方法,一种是DELETE FROM TABLENAME WHERE... , 还有一种是TRUNCATE TABLE TABLENAME. DELET ...
- MySQL两种引擎的比较
MyISAM,InnoDB主要区别: 1.MyISAM是非事物安全的,InnoDB是事物安全的. 事物安全的特点为更安全,遇到问题会自动恢复或从备份加事物日志回复,如果更新失败,你的所有改变都变回原来 ...
- Netty源码分析第8章(高性能工具类FastThreadLocal和Recycler)---->第6节: 异线程回收对象
Netty源码分析第八章: 高性能工具类FastThreadLocal和Recycler 第六节: 异线程回收对象 异线程回收对象, 就是创建对象和回收对象不在同一条线程的情况下, 对象回收的逻辑 我 ...
- LVS 负载均衡 keepalive
为什么要学lvs 工作在网络模型的7层,可以针对http应用做一些分流的策略,比如针对域名.目录结构, Nginx单凭这点可利用的场合就远多于LVS了.最新版本的Nginx也支持4层TCP负载,曾经这 ...
- nodejs 服务器实现区分多客户端请求服务
初始实现 var net = require('net');//1 引入net模块 var chatServer = net.createServer();//创建net服务器 var clientL ...
- flume handler
1.classpath classpath中需要这两项:Flume Agent configuration file and the second are the Flume client jars ...
- 随手记录-linux-vim使用
- "prefs:root" or "App-Prefs:root"
iOS 苹果审核也是看心情的吗?已经上线几个版本了,新版本提交审核居然被查出来了! Guideline 2.5.1 - Performance - Software Requirements Your ...
- 关于inherit的笔记
1. inherit是动态的 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...