(此处背景图宽:高=1.92)
1.在html中设置两种可选择的类:
<div class="login-container" v-bind:class="[{'cal-backgound-size-width': !calBgImage },{'cal-backgound-size-height' : calBgImage }]">
2.css样式:
宽度自适应:
.cal-backgound-size-width{
background: url('/../../../static/bg.png') no-repeat;
background-size: auto 100%;
}
高度自适应:
.cal-backgound-size-height{
background: url('/../../../static/bg.png') no-repeat;
background-size: 100% auto;
}
3.js控制
mounted() {
this.calBgImage = (document.body.clientWidth / document.body.clientHeight) > 1.92
// 然后监听window的resize事件.在浏览器窗口变化时再设置下背景图高度.
const that = this
window.onresize = function temp() {
that.calBgImage = (document.body.clientWidth / document.body.clientHeight) > 1.92
}
},
所有评论(0)