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 bilibili</iframe>
    </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）还没有进行过测试