图片等比压缩适应父盒子宽高,并且不被裁切

最近开发的功能,图片不被裁切的展示在父盒子中并且不超过父盒子的宽高,如果图片宽高小于父盒子宽高,则原尺寸展示。下面是代码:





    
    图片等比压缩适应父盒子宽高,并且不被裁切
    
    



    

要注意this.$refs.logo.offsetWidth 获取动态图片的宽高是0,需要用img.onload方法。
效果:
图片等比压缩适应父盒子宽高,并且不被裁切_第1张图片图片等比压缩适应父盒子宽高,并且不被裁切_第2张图片
这就是我的总结。

你可能感兴趣的:(前端vue.jshtml)