C端电商详情页的头图显示

162 阅读1分钟

首先一般图片要长宽比是1:1,最低600,不然在大屏会糊掉 详情页显示,在不同机型会有不同宽度,那么怎么最简单的才能让图片在不同机型都能完整显示又不会打乱整个页面布局呢?
最简方案:

在image的父盒子设置宽度: 
computed: {
    height() {
        return document.body.clientWidth;
    },
},
image自身cover就ok,打完收工!