我的前端组件 ---- 16:9固定宽高比例的div
目标：
遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。
实现：
方法一：这也是比较经典的一个方法，利用padding-bottom来实现。
<!DOCTYPE html>
<html>
<head>
<title>固定宽高比16:9</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
width:100%;
}
/* 16:9宽高比，则设padding-bottom:56.25% */
/* height: 0px,防止矩形被里面的内容撑出多余的高度*/
.box{
width: 100vw;
height: 0px;
position: relative;
padding-bottom: 56.25%;
background: pink;
}
/* 如果需要在div里面设置内容*/
/* 需要设置position：absolute，才能设置内容高度100%和矩形一样 */
/*.box p{
width: 100%;
height: 100%;
position: absolute;
}*/
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<p>这是一个16：9的矩形</p>
</div>
</div>
</body>
</html>方法二：利用vmin来实现。
<!DOCTYPE html>
<html>
<head>
<title>固定宽高比16:9</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
width:100%;
}
/*vmin：相对于可视窗口的宽度或高度中较小的那个，被均分为100单位的vmin*/
/*例：当宽度是300，高度是600，那么50vmin则是相对于宽度的50%*/
.box{
height: 56.25vmin;
background: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<p>这是一个16：9的矩形</p>
</div>
</div>
</body>
</html>注意：如果屏幕宽度较大高度较小时，则可以用vmax。如果需要随意切换时，可以通过js来控制。
总结：
两种方法各有利弊，方法一：兼容性好，代码相对长点，理解也比较困难点。方法二：代码简洁，理清定义后便非常容易理解，但是兼容性相对差一些。不过兼容性啥的，怕什么哈哈哈。
我的前端组件 ---- 16:9固定宽高比例的div的更多相关文章
- 固定宽高的DIV绝对居中示例
看了一些代码,然后自己试验了一番,分享如下示例: 实现点: 如果元素的宽高固定,那么,css指定样式为top:50%;left:50%; 而margin-top和 margin-left 指定为负数, ...
- 【转载】图片 CSS：怎样才能 “响应式 + 固定宽高比例”？
自己根据项目需要,把代码摘了出来 <div class="img-box"></div> .img-box{ height:0; padding-botto ...
- 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- 前端 JS 获取 Image 图像 宽高 尺寸
前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
- 从 0 到 1 到完美，写一个 js 库、node 库、前端组件库
之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonj ...
- 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- Vue.js：轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
随机推荐
- 刷新页面后，让控制台的js代码继续执行
在各种限时,秒杀活动中,有个自动循环的点击的工具是很重要的. 为了方便起见,我们把Js代码放在浏览器的控制台执行,但是刷新页面后,js代码就清空了,也就无法执行. 可以用js代码实现一个不受页面刷新影 ...
- CAD常用命令、快捷键和命令说明大全
CAD常用命令.快捷键和命令说明大全 一:常用功能键 F1: 获取帮助 F2: 实现作图窗和文本窗口的切换 F3: 控制是否实现对象自动捕捉 F4: 数字化仪控制 F5: 等轴测平面切换 F6: 控制 ...
- 【Python开发】python PIL读取图像转换为灰度图及另存为其它格式（也可批量改格式）
例如有一幅图,文件名为"a.jpg'. 读取: from PIL import Image #或直接import Image im = Image.open('a.jpg') 将图片转换成 ...
- yum tenxun ntpdate 时间同步
centos7 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.cloud.tencent.com/repo/centos7_base ...
- MSF魔鬼训练营-5.3 MS08-067安全漏洞实战
msf > search ms08_067 Matching Modules ================ Name D ...
- pikachu-SQL注入
参考网址: http://www.mamicode.com/info-detail-2795438.html
- supervisor管理superset
参考: https://blog.51cto.com/qiangsh/2153185 安装supervisor: pip install supervisor 停止supervisor管理的服务: [ ...
- git 添加本地项目到远程仓库 记录一下命令
1.初始化 git init 2.关联远程仓库 git remote add origin 你的仓库地址 3.加入到本地仓库 git add * 4.推送(强推).如果不想强推 ,可以先执行下 git ...
- java生成0~9个9个不相等的整数
HashSet<Integer> hs=new HashSet<Integer>(); Integer i=0; while (i<9){ int s=(int) Mat ...
- Unity VR-播放demo模型后无法移动视角
资源源于:小意思VR 唉..可怜一下自己,这个问题百度google也不知道怎么搜,没搜出来,在群里问出来的. 当时感觉自己Unity有问题..(就是因为自己啥也不会看不懂) 按右键.或者WASD视角都 ...