一、概述
现有一个图片预览功能,目前设置的宽高都是100%。但是这样有一个问题,如果图片的高度太高,图片展示不全。
二、解决
vue图片在设置好的div里面自动适应宽高,图片显示全部,不够宽高的留空白
本文使用的图片分辨率为:4000x2026
我的电脑分辨率为:1920x1080
默认宽高如果设置100%,电脑屏幕会显示不全的。
test.vue
<template>
<div>
<div class="rightullidiv">
<img
:src="pic"
alt=""
class="rightulliimg"
>
</div>
</div>
</template>
<script>
export default {
data() {
return {
pic:"https://pic.3gbizhi.com/2021/0923/20210923090744481.jpg"
}
},
mounted() {
},
methods: {
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.rightullidiv {
width: 100%;
/*background: #f2f2f2;*/
display: flex;
justify-content: center;
align-items: center;
.rightulliimg {
max-width: 100%;
max-height: 700px;
}
}
</style>
注意:这里设置了图片最高 高度为700,如果高度太高,图片会显示不全。
访问页面,电脑屏幕就可以完整的显示图片了。
所有评论(0)