我的前端组件 ---- 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 ...
随机推荐
- Linux C/C++基础——文件(上)
1.文件指针 FILE* fp=NULL; fp指针,只调用了fopen(),在堆区分配空间,把地址返回给fp fp指针不是指向文件,fp指针和文件关联,fp内部成员保存在文件的状态 操作fp指针,不 ...
- 【神经网络与深度学习】GLog使用笔记
环境: XPsp3 vs2005 glog-0.3.3 http://download.csdn.net/detail/chenguangxing3/6661667 编译: glog-0.3.3里面有 ...
- nginx 反向代理是url带后缀
1.后端:http://10.253.149.2/tdsqlpcloud/index.php 2.配置文件 danjan01deiMac:nginx danjan01$ cat /usr/local/ ...
- mysql——查询语句——单表查询——（概念）
一.基本查询语句 select的基本语法格式如下: select 属性列表 from 表名和视图列表 [ where 条件表达式1 ] [ group by 属性名1 [ having 条件表达式2 ...
- python smtplib server not connect
最近发现用smtplib发邮件一直发送不成功,使用debug发现前面都正常,但是DATA发送直接被smtp服务器直接断开.smtp服务器显示body丢失. 后来发现是我加了附件,有指定文件类型: at ...
- Oracle-DDL 3- 触发器
DDL-数据定义语句: 四.触发器 -- 触发器(trigger),与某些特定的操作绑定,当达到触发条件后会自动触发--主要用来将某些操作的过程记录下来,或者阻止某些非法的操作,保护数据 /*触发条件 ...
- ABC133F Small Products
考虑 DP. 状态 令 $f[\ell][x]$ 表示长度为 $\ell$,首项不超过 $x$ 的序列的个数. 答案是 $f[K][N]$. 有递推 $f[\ell][x] = f[\ell][x - ...
- 2019.07.05 纪中_B
今日膜拜:czj大佬orz%%% 2019.07.05[NOIP提高组]模拟 B 组 今天做题的时候大概能判断出题人的考点,可是就是没学过...特别痛苦 T0:栈的定义,模拟就好了T1:感觉像是找规律 ...
- codeforces 816B Karen and Coffee （差分思想）
题目链接 816B Karen and Coffee 题目分析 题意:有个人在学泡咖啡,因此看了很多关于泡咖啡温度的书,得到了n种推荐的泡咖啡温度范围[L1,R1] ,此人将有k种做法推荐的温度记为可 ...
- 【深入理解JVM】类加载器与双亲委派模型 （转）
出处: [深入理解JVM]类加载器与双亲委派模型 加载类的开放性 类加载器(ClassLoader)是Java语言的一项创新,也是Java流行的一个重要原因.在类加载的第一阶段“加载”过程中,需要通过 ...