Table of Contents  目 录
文章目录

div标签等比缩放

由 四月浅森 发布

2020年12月6日

本文章作用有限,后经实测发现transform完全是不需要的步骤,直接在relative div下添加一个absolute div就可以解决这个问题,不用transform的参与也能很好的解决问题

引言

有时文章里需要插入B站视频的iframe标签来引入B站的视频,代码通常是这样的

代码.png

一个简单的iframe标签,没有宽度和高度,肯定是没法直接使用的,视频窗口太小了 :aru_9.png:

没有css.png

如果直接设置宽度和高度的话(注:height无法设置成百分比属性,只能设置一个绝对的值)

width: 100%;
height: 300px;

在手机上显示没有什么问题,在电脑上可能会出现太长或者太高,有黑边的情况出现

太长了.png

太高.png

这时需要div能够按视频的比例(一般以16:9)进行等比缩放,但CSS原生没有开箱即用的属性,我们只能另寻它法,这里我列出了一些我找到的办法:

CSS + Javascript方法

Javascript几乎可以实现所有css能实现的效果(不考虑性能和开发周期的前提下),但用JS多少不太方便,一旦元素结构改变可能需要修改大量的代码

媒体查询@media方法

使用@media查询可以针对不同的分辨率的设备设置不同的CSS方案,虽然可以在不借助JS的情况下通过大量的@media查询精细地设置DIV在不同分辨率下的比例,但是却不能实现平滑缩放,在不同的@media切换时会显得很生硬(其实可以通过transition属性设置属性过渡来减少这种生硬效果),也不能实现无极缩放(会有段落感),视觉效果会大打折扣

@media only screen and (min-width: 100px) and (max-width: 640px) {
    div{
        width: 100px;
        height: 60px;
    }
}

@media only screen and (min-width: 641px) and (max-width: 789px) {
    div{
        width: 200px;
        height: 120px;
    }
}

padding + 百分比方法

这个方法是一位前端大佬的方法:百度知道,我只能说:NB!妙啊!我怎么就没想到 :mao_016.jpg:

大致原理

当把padding属性设置成百分比时,其具体的值是根据元素的宽度来计算的,

比如一个div的宽高是120px x 70px,当padding: 50%时,padding具体的值就是120px x 50% = 60px,

运用这个机制,我们可以把需要等比缩放的div设置成这样


div {

    width: 100%;

    height: 0px;

    padding-bottom: 60%;

}


将高度设置0,并且设置好 padding-bottom: 60%; 这样宽度就是0px,padding-bottom就是width x 60%,也就是宽高比是100 : 60,再让div里的内容溢出显示,就可以实现等比缩放

预览效果

(ps: 家里停电了,用我的寨板录的,配置不够Edge吃的所以画面非常非常卡 :mao_039.jpg: )

div就可以实现无极等比缩放了

等比缩放.gif

所用到的CSS

background-color: #2dce89; /*绿色背景*/
width: 100%;
height: 0;
padding-bottom: 50%; /*二比一比例*/

绝对定位的问题

当然到这里还不够,因为文字是溢出显示的而且文字有自己固定的高度,但iframe没有,直接把iframe放进去的话因为宽度是0所以无法正常显示出来,所以需要从利用与宽度等比例的padding-bottom属性下手,

首先在等比div里插入一个新的div,用做iframe的容器(container/wrapper),将容器div的尺寸设置到与等比div一样大,然后再往容器div里放置iframe并设置宽高=100%

完整示例

HTML

<xmp><div class="mydiv">
    <div class="wrapper">
        <iframe>vedio from bilibiliiframe>
    div>
div>xmp>

CSS

.mydiv {
    border: 2px solid #2dce89;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    transform: translateY(0px);
}

.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.wrapper iframe {
    width: 100%;
    height: 100%;
}

这里有几个地方要说一下:

transform属性可以重新界定position: absolute的四个参考边界的位置,即使是translate(0px)也可以,迫使绝对定位的参考位置定位到有transform属性的元素上,而不是定位到某个绝对定位的上级元素上,或者定位到屏幕边缘,可以理解为把top,left,bottom,right的基准点定位到他们的父亲元素上(padding也被包括在内),跟随使用相对定位的父元素一起定位,就是绝对定位和相对定位共存的一种方法

这样wrapper就会以它父元素的长宽(padding也会被算上)进行等比定位,再把视频标签iframe放到wrapper里,就可以实现等比缩放了

利用transform属性的这个办法是我无意间试出来的,目前也只在基于Chromium内核的浏览器上进行了测试,其它浏览器的兼容性(比如Safari、Firefox)还没有进行过测试