图片框住一个小视频 谈css padding百分比自适应
今天市场提出活动页,活动页有一块内容是在一个手机背景图框里播放视频,网页是适配的,设计师只给我一张带有手机壳的背景图。
如果用JS画应该也是可以的,但一个简单的活动页没必要,快速实现用背景图调CSS最快。
- 左侧放在框里的视频由两层实现
- 一层为背景图,一层为视频,一开始刚好卡住,当屏幕宽度变化时要适配,最好不要媒体查询适配大小
可以尝试一波 css padding 百分比的魔法了
以下实现代码:
<div class="desc-1 iphone-box hover">
<img class="iphone" src="/assets/plsv/img-phone-3cf540ac5d957bf4662c51c149eb7f6ecffee82a2f629d38eebc6f00d2578b88.png" alt="Img phone">
<div class="video-box">
<video loop autoplay poster="" src="https://odum9helk.qnssl.com/lmJftwXMqXYw4wcLzZvwwT34llim"></video>
</div>
</div>
css :
.iphone-box {
padding: 171% 0 0;
position: relative;
img.iphone {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 26.7% 0 0;
video {
width: 100%;
height: 100%;
}
}
- 图片的父级元素 是没有宽高,设置
padding
占位, - 父元素设置
position:relative;
- 子元素设置
position:absolute;
- 父元素将子元素包裹
- 父元素
padding
设置为百分比 - 子元素的宽高随着父元素宽的变化 等比变化,不会出现
cover
形式的截图 - 由此叠在父元素里面的两层的相对位置就比较稳定
padding
的比例要符合一个计算规则(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width
当然也可以看着顺眼调就好了
图片框住一个小视频 谈css padding百分比自适应的更多相关文章
- 问题二:appium 搞定权限弹框的一个小办法
public void permission() { for (int i=0; i <= 10; i++) { if (getPageSource().contains("允许&qu ...
- opencv实现坐标旋转(教你框住小姐姐)
一.项目背景 最近在做一个人脸检测项目,需要接入百度AI的系统进行识别和检测.主要流程就是往指定的URL上post图片上去,之后接收检测结果就好了. 百度的检测结果包含这样的信息: left - 人脸 ...
- 没有内涵段子可以刷了,利用Python爬取段友之家贴吧图片和小视频(含源码)
由于最新的视频整顿风波,内涵段子APP被迫关闭,广大段友无家可归,但是最近发现了一个"段友"的app,版本更新也挺快,正在号召广大段友回家,如下图,有兴趣的可以下载看看(ps:我不 ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- jquery EsayUi 里一个小弹框
网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- hammer使用: 代码:捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果
hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/ 查找和下载. hamme ...
- easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法
easyui toopTip,鼠标划过悬浮,显示一个小提示框的方法 /*easyui,鼠标划过悬浮,显示一个小提示框的方法*/ function toopTip(idOrClass,showText) ...
随机推荐
- java实验题目
1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 实验源码: public class number1 { publi ...
- gdb移植(设备端本地版本)
Gdb下载地址:http://ftp.gnu.org/gnu/gdb/ ncurse下载地址:http://ftp.gnu.org/pub/gnu/ncurses/ 目录结构如下: ├── insta ...
- provider: Shared Memory Provider, error: 0 - No process is on the other end of the pipe.
通常情况下,要解决这个,你去SQL Server配置管理器(SSCM)和: [1]在SSCM中设置 [1.1]确保共享内存协议启用 [1.2]确保命名管道协议 [1.3]确保TCP / IP被启用,和 ...
- SQLite进阶-9.别名
我们可以暂时给表或者列重命名为另一个名字,称为别名,重命名只是临时运行时改变,不会改变数据库中的实际的名字. -- 语法 SELECT column_name AS column_alias_name ...
- #import "msado15.dll" no_namespace rename("EOF","adoEOF")
引入动态链接库msado15.dll的信息, no_namespace--无命名空间 rename(“EOF”,“adoEOF”)--把文件结束符“EOF”,更换成“adoEOF”
- linux内核编程入门 hello world
注意: Makefile 文件的命名注意M需要大写,否则会报错. 在Makefile文件中make命令前应为tab制表符. 下文转载至:https://blog.csdn.net/bingqing07 ...
- 【原创】运维基础之Amplify
官方:https://www.nginx.com/products/nginx-amplify/ NGINX Amplify is a SaaS‑based monitoring tool for t ...
- Extjs中,Vo对象中的属性无法在data中获取的解决方法
store.getById(data.data.id).raw.redpackid
- django 上传路径至vue处理组件加载
1,在主目录(项目目录)下新建中间件middleware.py文件 写入 from django.utils.deprecation import MiddlewareMixin from djang ...
- Linux之用户相关操作
1. 创建用户 useradd -m wolf #即创建一个用户并且创建同名的家目录 2. 设置密码 passwd wolf