照片在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%";
}
}