html div比例,我的前端组件 ---- 16:9固定宽高比例的div

目标：

遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。

实现：

方法一：这也是比较经典的一个方法，利用padding-bottom来实现。

固定宽高比16:9

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;

}*/

这是一个16：9的矩形

方法二：利用vmin来实现。

固定宽高比16:9

margin: 0px;

padding: 0px;

}

.wrap{

width:100%;

}

/*vmin：相对于可视窗口的宽度或高度中较小的那个，被均分为100单位的vmin*/

/*例：当宽度是300，高度是600，那么50vmin则是相对于宽度的50%*/

.box{

height: 56.25vmin;

background: pink;

}

这是一个16：9的矩形

注意：如果屏幕宽度较大高度较小时，则可以用vmax。如果需要随意切换时，可以通过js来控制。

总结：

两种方法各有利弊，方法一：兼容性好，代码相对长点，理解也比较困难点。方法二：代码简洁，理清定义后便非常容易理解，但是兼容性相对差一些。不过兼容性啥的，怕什么哈哈哈。

html div比例,我的前端组件 ---- 16:9固定宽高比例的div相关推荐

css实现固定宽高比例的div
使用padding实现这个方法的原理是,padding和margin的百分比值无论是水平方向还是垂直方向都是相对于宽度计算的. 利用这个原理,可以通过设置padding-top / padding- ...
饿了么ui组件中分页获取当前选中的页码值_【Web技术】314 前端组件设计原则
点击上方"前端自习课"关注,学习起来~ 译者:@没有好名字了译文:https://github.com/lightningminers/article/issues/36,http ...
前端组件化思想与实践
前端组件化思想与实践组件化思想什么是组件化? 简单的说组件就是:将一段UI样式和其对应的功能作为独立的整体去看待,无论这个整体放在哪里去使用,它都具有一样的功能和样式,从而实现复用,这种整体化的思 ...
用 JavaScript 实现手势库 — 手势动画应用【前端组件化】
前端<组件化系列>目录「一」用 JSX 建立组件 Parser(解析器) 「二」使用 JSX 建立 Markup 组件风格「三」用 JSX 实现 Carousel 轮播组件「四」用 ...
谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
谈谈我对前端组件化中"组件"的理解,顺带写个Vue与React的demo 前言前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的 ...
使用 Pipcook 识别图片中的前端组件
前言为了让大家更好地学习 Pipcook 和机器学习,我们准备了实战系列教程,会分别从前端组件识别.图片风格迁移.AI 作诗以及博客自动分类,这几个具体示例来讲解如何在我们日常开发中使用 Pipco ...
组件化开发实战_一篇文章搞懂什么是前端“组件化”开发
学过网页的朋友都知道,制作一个网页离不开HTML.CSS和JavaScript技术.对于初学者来来说,掌握这3门技术就已经很不容易了,为什么前端为什么又要搞出来一个"组件化"开发的 ...
[译] 前端组件设计原则
原文地址:Front end component design principles 原文作者:Andrew Dinihan 文中示例代码:传送门限于个人能力,如有错漏之处,烦请不吝赐教. 前言我 ...
「前端组件化」该怎么理解？
大家好,我是若川.今天分享一篇关于「前端组件化」的好文.欢迎点击下方卡片关注我. 以下是正文~ 这里我们一起来学习前端组件化的知识,而组件化在前端架构里面是最重要的一个部分. 讲到前端架构,其实前端架 ...

html div比例,我的前端组件 ---- 16:9固定宽高比例的div

html div比例,我的前端组件 ---- 16:9固定宽高比例的div相关推荐

最新文章

热门文章