图片框住一个小视频谈css padding百分比自适应

jcc 发布于2019-08-30 13:56 / 1952人阅读

摘要：今天市场提出活动页，活动页有一块内容是在一个手机背景图框里播放视频，网页是适配的，设计师只给我一张带有手机壳的背景图。

今天市场提出活动页，活动页有一块内容是在一个手机背景图框里播放视频，网页是适配的，设计师只给我一张带有手机壳的背景图。

如果用JS画应该也是可以的，但一个简单的活动页没必要，快速实现用背景图调CSS最快。

左侧放在框里的视频由两层实现

一层为背景图，一层为视频，一开始刚好卡住，当屏幕宽度变化时要适配，最好不要媒体查询适配大小

可以尝试一波 css padding 百分比的魔法了

以下实现代码：

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 当然也可以看着顺眼调就好了

GPU云服务器云服务器 css图片自适应 css自适应 asp 自适应css 图片自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115644.html

图片框住一个小视频谈css padding百分比自适应

摘要：今天市场提出活动页，活动页有一块内容是在一个手机背景图框里播放视频，网页是适配的，设计师只给我一张带有手机壳的背景图。今天市场提出活动页，活动页有一块内容是在一个手机背景图框里播放视频，网页是适配的，设计师只给我一张带有手机壳的背景图。如果用JS画应该也是可以的，但一个简单的活动页没必要，快速实现用背景图调CSS最快。 showImg(https://segmentfault.c...

U2FsdGVkX1x 2019-08-01 18:33 评论0 收藏0
段友福利：Python爬取段友之家贴吧图片和小视频

摘要：由于最新的视频整顿风波，内涵段子被迫关闭，广大段友无家可归，但是最近发现了一个段友的，版本更新也挺快，正在号召广大段友回家，如下图，有兴趣的可以下载看看我不是打广告的，没收广告费的同时，之前同事也发了一个贴吧的段子聚居地，客官稍等，马上奉上由于最新的视频整顿风波，内涵段子APP被迫关闭，广大段友无家可归，但是最近发现了一个段友的app，版本更新也挺快，正在号召广大段友回家，如下图，有...

singerye 2019-07-30 16:45 评论0 收藏0
巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

摘要：那想要优化这一点，唯一的方法就是利用内容高度来撑开而非，这个方案跟消除浮动所用的方案非常相似给容器添加一个子元素伪元素，并把子元素伪元素的设为，使其实际高度相当于容器的宽度，如此一来，便能把容器的高度撑至与宽度一致了。一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点：当margin/padding取形式为百分比的值时，无论是left/right，还是t...

wenzi 2019-08-28 18:28 评论0 收藏0
margin/padding百分比值的计算

摘要：还有一种说法是根本原因并不是因为死循环。，总而言之就是在默认的水平文档流方向下，和属性的垂直方向的百分比值都是相对于父元素宽度计算的。表示元素的高度为宽度的一半。 1、百分比介绍一般元素的宽度用百分比值表示时，元素的总宽度包括外边距取决于父元素的width，这样可能得到流式页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式，使其子元素使用百分数外边距，当...

jsummer 2019-08-29 16:37 评论0 收藏0
margin/padding百分比值的计算

摘要：还有一种说法是根本原因并不是因为死循环。，总而言之就是在默认的水平文档流方向下，和属性的垂直方向的百分比值都是相对于父元素宽度计算的。表示元素的高度为宽度的一半。 1、百分比介绍一般元素的宽度用百分比值表示时，元素的总宽度包括外边距取决于父元素的width，这样可能得到流式页面，即元素的外边距会扩大或缩小以适应父元素的实际大小。如果对这个文档设置该样式，使其子元素使用百分数外边距，当...

Pikachu 2019-08-02 11:24 评论0 收藏0