js 照片自适应 铺满 展示

照片在div中自适应展示

描述：当照片在一个固定的宽高展示时，照片宽高不一，为了美化铺满div
解决方案:我们通过得到照片的宽高W、H
问题分析：

• 宽>高 ：此时我们让高度顶满盒子，宽度自适应
• 宽<高： 此时我们让宽度顶满，高度自适应

在img上面嵌套父元素

来使img在盒子里面上下左右居中，且隐藏超出的部分
父元素必须要有确定的宽高，否则会引发img不能继承到父元素的宽高

<div class="img_parent">
	<img />
</div>
<style>
.img_parent{
 	display: flex;
    justify-content:center;
    align-items: center;
            
    overflow: hidden;
    width: 90px;   
    height: 90px;
}
</style>

使用img标签的onload方法

<img :src="‘data:image/jpeg;base64,’+item.path" @load=“imgOnload” alt="">

imgOnload(e){
        const tag = e.target;
        if (tag.width / tag.height <= 1) {
          e.srcElement.style.height = "auto";
          e.srcElement.style.width =  "100%";
        } else {
            e.srcElement.style.width =  "auto";
            e.srcElement.style.height = "100%";
        }
      }

来源：CSDN

作者：雨漫

链接：https://blog.csdn.net/weixin_43939356/article/details/103880224