看了好多百度搜索出来的文章,没有找到想要的解决办法,这里我分享两个解决办法吧,若有不足之处请谅解,谢谢。
第一个,使用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等资源,可以直接本地测试,应该有你想要的。