我的前端组件 ---- 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来控制。

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

原文地址:https://www.cnblogs.com/jlfw/p/11827372.html

时间: 2024-10-03 08:04:13

我的前端组件 ---- 16:9固定宽高比例的div的相关文章

前端组件库大合集-必备收藏

前端组件库 搭建web app常用的样式/组件等收集列表(移动优先) 0. 前端自动化(Workflow) 前端构建工具 Yeoman – a set of tools for automating development workflow gulp – The streaming build system grunt – the JavaScript Task Runner F.I.S – 前端集成解决方案 前端模块管理器 Bower – A package manager for the w

谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ...... 每个频道有独立的团队去维护这些代码,具体到某一个频道的话有会由数十个不等的页面组成,在各个页面开发过程中,会产生很多重复的功能,比如弹出层提示框,像这种纯粹非业务的UI,便成了我们所谓的UI组件,最初的前端组件也就仅仅指的是UI组件. 而由于移动端的兴起,前端页面的逻辑已经变得很重了,一个页面的

面试官: 写过『通用前端组件』吗?

前言 设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design.Antd.iView 等现成组件库的 API 每个人都可以做到,但是很多人并不知道很多常用组件的设计原理. 能否设计出通用前端组件也是区分前端工程师和前端api调用师的标准之一,那么应该如何设计出一个通用组件呢? 下文中提到的组件库通常是指单个组件,而非集合的概念,集合概念的组件库是 Antd iView这种,我们所说的组件库是指集合中的单个组件,集合性质的组件库需要考虑的要更多. 文章目录 前端组件库的

前端 JS 获取 Image 图像 宽高 尺寸

前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在图片数量较多的时候,这样的获取效率实在是低下.所有就有了这篇文章.通过直接读取解析文件的字节码来获取图片的尺寸. IMAGE_HEAD_SIGS var IMAGE_HEAD_SIGS = { GIF: [0x47, 0x49, 0x46], //'G' 'I' 'F' ascii PNG: [0x

Ubuntu 16设置固定IP和DNS

ubuntu 16  设置固定ip地址和dns 1.设置ip地址 vi /etc/network/interfaces 添加如下内容: # The primary network interface # ens160是网卡,不知道自己是什么样的网卡,可以通过命令ip addr查看auto ens160iface ens160 inet static # 设置固定的ip地址,如下示例address 10.0.0.2 # 子网和网关可以通过route -n查看netmask 255.255.255.

基于唯一状态的前端组件开发

facebook的react的框架提出了一个基于唯一状态来渲染前端组件的想法.什么是唯一状态,採用唯一状态渲染究竟有什么优点. 希望大家看到这篇文章以后不用不论什么框架也能够写出基于唯一状态渲染的前端组件. 基于唯一状态的组件的开发模式就是组件内部永远仅仅存在一份数据来表示组件的状态,而且更新组件时仅仅仅仅使用这一份数据. 这样的开发模式的优点.主要体如今以下两个方面 降低事件与Dom元素的联系 便于保存和恢复组件的状态 降低事件与Dom元素的联系 我们先来看一段传统开发页面交互逻辑时写的代码:

CSS左侧固定宽 右侧自适应(兼容所有浏览器)

左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了: 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么

2015前端组件化框架之路(转)

https://github.com/xufei/blog/issues/19 1. 为什么组件化这么难做 Web应用的组件化是一个很复杂的话题. 在大型软件中,组件化是一种共识,它一方面提高了开发效率,另一方面降低了维护成本.但是在Web前端这个领域,并没有很通用的组件模式,因为缺少一个大家都能认同的实现方式,所以很多框架/库都实现了自己的组件化方式. 前端圈最热衷于造轮子了,没有哪个别的领域能出现这么混乱而欣欣向荣的景象.这一方面说明前端领域的创造力很旺盛,另一方面却说明了基础设施是不完善的

如何通过 Vue+Webpack 来做通用的前端组件化架构设计

如何通过 Vue+Webpack 来做通用的前端组件化架构设计 转载 作者:伯乐在线专栏作者 - 新空气 链接:http://web.jobbole.com/86977/ 点击 → 了解如何加入专栏作者 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberjs.avalonjs.vuejs. 我个人接触使用过:avalonjs.angularjs.vuejs.因为工作以及前端团队能力的问题,所以在不同的公司,在开发工作中选用了不同的前端架构. 以下仅仅是