css3 transform缩放空白隐藏 （占位策略）

看了好多百度搜索出来的文章，没有找到想要的解决办法，这里我分享两个解决办法吧，若有不足之处请谅解，谢谢。

 

第一个，使用margin解决：

原理：

        1、外层定容器（溢出隐藏） 

        2、内层定缩放（具体方法为：定原点，然后margin偏移）

缺点：

        1、相对于部分垂直布局偏移距离实际是有误差的（原因没深入了解，有见解的请指点一下，谢谢），例如：法二的代码就不适合该法一

示例代码如下：

.cardlayout{
        width: 95%;
        display: block;
        margin: 0 auto;
        min-height:160px;
        box-shadow:0px 4px 6px 0px rgba(0,122,255,0.13);
        border-radius:4px 8px 8px 8px;
        overflow: hidden;
        box-sizing:border-box;
        .htmls{
            overflow: hidden;
            display: block;
            width: 200%;
            height: 200%;
            transform:scale(0.5,0.5);
            transform-origin:left bottom;
            margin-top: -50%;
        }
 }

<div class="cardlayout">
        <div class="htmls" v-html="nowcard">html等资源</div>
</div>

 

备注：你可以在<div class="htmls" v-html="nowcard">html等资源</div>内放一段html试试，本人测试项目为vue

 

 

第二个，使用position解决：

原理：

        1、外层定容器（溢出隐藏），必须相对定位

        2、外层容器内放自适应或固定宽高容区 

        3、内层定缩放（具体方法为：定原点，left top）

示例代码如下：

   .bg{
        background-color:red;
        width:100px;
        overflow:hidden;
        position:relative;
        font-size:0;
    }
    .img{
        position:absolute;
        left:0;
        top:0;
        right:0;
        height:200%;
        display:block;
        width: 200%;
        transform:scale(0.5,0.5);
        transform-origin:left top;
        background-color:rgba(0,0,0,0.5);
    }
    img{
        width:100%;
    }

<div class="bg">

    /*我这里放一张图片作撑开容器的容区，或透明或其他就随大家了，(图片资源不是我的，防侵权，穷逼的我赔不起)*/
    <img src ="html等资源" />
    <div class="img">
        123465
    </div>
</div>

 

以上就是我的分享，只要放入对应的html等资源，可以直接本地测试，应该有你想要的。