uniapp动态logo,css自适应屏幕宽度

首先加载图像容器宽度确定的图像后，根据图像长宽比设定图像容器高度的构想图像容器的宽度确定。 uni-app的图像组件。 将模式设定为scaleToFill。 (在不保持长宽比的情况下缩放图像，用image元素填充图像的宽度和高度。)。 uni-app的image组件提供@load事件。 @load活动可以获得图像的宽度和高度。 获取图像的宽度、高度后，计算图像容器的高度。 使用内联样式设置图像容器中图像的高度。 图像容器的长宽比与图像的长宽比一致。 步骤设置image组件：将mode设置为scaleToFill； 行内样式设置图像高度div class='zbox' v-for='(item，index ) n imagelist ' : key=' index ' image : id=' img ' index ' : src=' item.URL ' mode=' scaletofill ' class=' scasce image/divsscriptexportdefault { components 3360 }、data () return{imagelission}和methods: {/*调用接口，服务器uni.request (. success :函数(RES ) ) {_this.imageList=res.data； (，…)；imageload:function(e ) ) {var _this=this； /*图片容器的id */var id=e.currentTarget.id； /*图像容器对应数组数据的索引*/varindex=id.substr(3； /*图像容器对应的数据*/var item=_ this.imagelist [ index ]； /*查询图像容器的宽度*/const query=uni.createselectorquery ().in(this )； query.select('#'id ).boundingclientrect ) data={/*计算图像容器的宽度}/item.container height=data.width * e.detata /*强制刷新。 如果不强制刷新，图像容器的高度将为*/_this.$forceUpdate (； ().exec； }}}/script