大小不一样的图片随着盒子大小自适应

前提:vue+iview做后台管理系统

需求:页面一行有固定的4张卡片,每张卡片里有图片,图片是从后台系统中上传的,大小不固定,要卡片中的图片高度随着屏幕大小自适应

小屏幕效果:

《大小不一样的图片随着盒子大小自适应》

大屏幕效果:

《大小不一样的图片随着盒子大小自适应》

解决方法有两种:

1. 利用@media媒体查询做。

① 在index.html中加入meta标签 <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

② 在当前页面中给图片对应盒子在不同屏幕尺寸下给不同的高度

《大小不一样的图片随着盒子大小自适应》

2. 用原生js的方法,获取到当前卡片的宽度,当改变屏幕大小时用获取到的宽度根据设计图乘以一个宽高比例(美观好看就行),最后把计算得到的值动态设置高度样式

data数据:

《大小不一样的图片随着盒子大小自适应》

注意:这里需要注意的是设好后,有时候拖动屏幕改变大小时会报错或者不会实时变化,要把结构里渲染卡片的数组对象,初始化时就要设成数组对象形式[{}],因为在页面初始化时可能没有数据,所以页面渲染时获取不到dom结构

结构:

《大小不一样的图片随着盒子大小自适应》

方法和钩子函数:

《大小不一样的图片随着盒子大小自适应》

 

    原文作者:池中飞雪
    原文地址: https://blog.csdn.net/lianwenxiu/article/details/93089805
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞