我的前端组件 ---- 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 ...
随机推荐
- Python学习之认知（二）
第二章(二) 2.1.5 变量 变量:将运算的中间结果暂存到内存,以便后续程序调⽤. 变量的命名规则: 1.变量由字母, 数字,下划线搭配组合⽽成 2.不可以⽤数字开头,更不能是全数字 ...
- 【计算机视觉】背景建模--Vibe 算法优缺点分析
一.Vibe 算法的优点 Vibe背景建模为运动目标检测研究邻域开拓了新思路,是一种新颖.快速及有效的运动目标检测算法.其优点有以下两点: 1.思想简单,易于实现.Vibe通常随机选取邻域20个样本为 ...
- JS中FireFox新开窗口预览打印处理的方式
仅提供思路,勿喷如下↓ /** * 打印方法 * @param dom 要被打印的dom元素 * @param parentClassName 该组件的页面根组件class名 * @param pag ...
- selenium—alert用法
切换到弹框: switch_to_alert() ① alert.accept() 确认弹框 driver.switch_to_alert().accept() ② alert.dismiss() ...
- Object中有哪些方法及其作用
你知道Object中有哪些方法及其作用吗? 一.引言 二.Object方法详解 1.1.registerNatives() 1.2.getClass() 1.2.1.反射三种方式: 1.3.hashC ...
- 旗舰版win7系统中GraphEdit执行Loading a Graph From an External Process失败对策
操作系统:旗舰版win7 DirectShow SDK: 9.0 IDE环境:VS2008 以下代码参考MSDN: HRESULT AddToRot(IUnknown *pUnkGraph, DWOR ...
- L2-013. 红色警报(并查集+无向图联通分量)
战争中保持各个城市间的连通性非常重要.本题要求你编写一个报警程序,当失去一个城市导致国家被分裂为多个无法连通的区域时,就发出红色警报.注意:若该国本来就不完全连通,是分裂的k个区域,而失去一个城市并不 ...
- intelij IDEA设置goole code style风格
1.安装google-java-format 插件 file ->Setings... ->pligins 输入上诉插件安装 2.下载IntelliJ Java Goog ...
- oa_mvc_easyui_后台布局(3)
1.新建HomeController控制器,并创建视图,后台的主页 2.easyUI的引用: <link href="~/Content/default/easyui.css" ...
- 第二章 单表查询 T-SQL语言基础(2)
单表查询(2) 2.2 谓词和运算符 T-SQL有几种不同的语言元素可以指定逻辑表达式,例如,查询过滤器(WHERE和HAVING),CHECK约束,等等. 在逻辑表达式中可以使用各种谓词(取值为TR ...