图片自动缩放写法

/*For Firefox Chrome*/
.demo{border:1px solid #ddd;width:200px;height:150px;overflow:hidden;text-align:center;display:table;float:left;position:relative;}
.demo a{display:table-cell;vertical-align:middle;width:200px;height:140px;}
.demo a img{border:1px #ddd solid;margin:0 auto;max-width:200px;max-height:140px;}
/*For IE7*/
*+html .demo a{position:absolute;top:50%;width:100%;text-align:center;height:auto;}
*+html .demo a img{position:relative;top:-50%;left:-50%;}
/*For IE6*/
*html .demo a{position:absolute;top:51%;width:100%;text-align:center;height:auto;display:block;}
*html .demo a img{position:relative;top:-50%;left:-50%;width:expression(this.width>200?"200px":"auto");height:expression(this.height>140?"140px":"auto");}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
针对这个需求,我可以为您提供以下的解决方案: 1. 在uni-app中,可以使用uni.getImageInfo()获取到图片的宽高信息,然后根据设备的DPR动态计算出需要加载的图片资源路径。 2. 对于没有@1x图的图片,可以通过自定义组件的方式,在组件中进行判断和处理,如使用默认的图片缩放等方式进行兼容。 具体实现可以参考以下步骤: 1. 在项目中创建image公共组件,例如:`common-image.vue`。 2. 在组件中引入DPR适配的工具类,如:`utils.js`,并且在组件的生命周期函数中计算出当前设备的DPR值。 3. 在组件中使用uni.getImageInfo()获取到图片的宽高信息,并且根据DPR值计算出需要加载的图片路径。 4. 对于没有@1x图的图片,可以在组件中使用默认的图片缩放等方式进行兼容处理。 以下是示例代码,仅供参考: ``` <template> <image :src="imageSrc"></image> </template> <script> import utils from '@/utils.js' export default { props: { src: { type: String, required: true } }, data() { return { imageSrc: '' } }, created() { this.init() }, methods: { async init() { const info = await uni.getImageInfo({ src: this.src }) const dpr = utils.getDPR() const suffix = `@${dpr}x` let src = this.src if (src.indexOf('@') > -1) { src = src.split('@')[0] + suffix + src.split('@')[1] } else { src += suffix } this.imageSrc = src } } } </script> ``` 在utils.js中可以定义一个getDPR()方法,用来获取设备的DPR值,示例代码如下: ``` export default { getDPR() { let dpr = 1 if (uni.getSystemInfoSync().platform === 'android') { dpr = uni.getSystemInfoSync().pixelRatio dpr = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1 } else { dpr = uni.getSystemInfoSync().pixelRatio } return dpr } } ``` 这样,在使用公共组件时,只需要传入图片的路径,组件会自动根据设备的DPR值加载对应的图片资源,同时兼容小程序、H5和App三个平台。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值