背景：先做了小程序，现在需要兼容h5

问题一：Image组件mode属性设置为aspectFill在h5上没效果

解决方法：给img加样式 object-fit: cover （例子如下）

// jsx

<Image className="teach-cover" mode="aspectFill" src={data?.cover || ''}  />

// 样式

.teach-cover {

    img {

      object-fit: cover; // aspectFill在h5上没效果

    }

}

TBC----------------------

Taro兼容h5的一些小问题的更多相关文章

  1. Taro 开发踩坑指南 (小程序，H5, RN)

    Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...

  2. 前端生成分享海报兼容H5和小程序

    ### 移动端分享海报生成 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果

  3. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  4. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

  5. 超出隐藏兼容H5

    常用的字体超出隐藏不能兼容H5和ios 所以整理了两种用jquery来实现的方法,然后弊端是只能隐藏指定字数不能段落隐藏 方法一. //超出隐藏兼容iosfunction hide(text,nube ...

  6. 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结

    前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...

  7. H5 页面与小程序之间 传递数据

    H5 页面与小程序之间 传递数据 小程序里面的 H5页面与小程序之间怎么传递数据 webview与小程序之间的实时通信 webview主动发消息给小程序 webview可以利用jssdk提供的 wx. ...

  8. 今天记录一下h5跳转小程序，可以通过短信推广小程序

    今天记录一下h5跳转小程序最简单的方法,首先准备条件,是一个已经上线的小程序 根据URL Schame进行跳转,在微信公众平台登录自己的小程序,然后生成RL Schame,如下图 其次按照步骤进行小程 ...

  9. 开发H5程序或者小程序的时候，后端Web API项目在IISExpress调试中使用IP地址，便于开发调试

    在我们开发开发H5程序或者小程序的时候,有时候需要基于内置浏览器或者微信开发者工具进行测试,这个时候可以采用默认的localhost进行访问后端接口,一般来说没什么问题,如果我们需要通过USB基座方式 ...

  10. Taro/JS/H5/小程序：纯前端解决小程序微信支付统一下单和调起支付

    这个文章不会说具体0到1的代码流程,我会着重讲几个问题的解决 准备以下依赖 "md5": "^2.2.1", "xml-js": " ...

随机推荐

  1. [转帖]Nginx 使用与异常处理

    http://jartto.wang/2017/04/15/nginx-exception-handling/ 以前总是偷懒使用 Http-Server 来启动一个本地服务,后来花时间学习了一下 Ng ...

  2. [转帖]Influxdb 2.x 快速入门

    Influxdb 2.x 快速入门 https://www.jianshu.com/p/268fca65f10e Influxdb是由Golang 构建的时序数据库,由于由Go语言构建使得其跨平台部署 ...

  3. Linux KVM网络处理过程

    Linux KVM网络处理过程 总体解决方法 本次遇到的问题是KVM的网桥处理不小心导致系统无法连接.处理简要总结: 进入机房,给IPMI插上网线, 开机点 Del 进入bios 设置IMPI的地址 ...

  4. 你不知道的Promise状态变化机制

    1.Promise中PromiseStatus的三种状态 var p = new Promise((resolve, reject) => { // resolve 既是函数也是参数,它用于处理 ...

  5. 关于git的几点疑问

    git rename后查看之前的记录 对于某个文件进行rename之后,使用show log命令查看之前的修改记录都会丢失,通过命令行方式进行mv之后,在tortoisegit中查看记录还是丢失的 g ...

  6. vim 从嫌弃到依赖(5)——普通模式的一些操作

    通过前面几章内容的铺垫,基本已经介绍完了普通模式的大部分内容,按照进度下面会依次介绍插入模式.命令模式.选择模式的一些操作.根据不同模式提供功能的多少和使用频率,篇幅会有长有短.本来这篇文章应该介绍插 ...

  7. 基于知识图谱的电影知识问答系统：训练TF-IDF 向量算法和朴素贝叶斯分类器、在 Neo4j 中查询

    基于知识图谱的电影知识问答系统:训练TF-IDF 向量算法和朴素贝叶斯分类器.在 Neo4j 中查询 1.项目介绍 训练 TF-IDF 向量算法和朴素贝叶斯分类器,预测用户文本所属的问题类别 使用分词 ...

  8. 推荐系统[四]：精排-详解排序算法LTR (Learning to Rank)_ poitwise, pairwise, listwise相关评价指标，超详细知识指南。

    0.前言召回排序流程策略算法简介 推荐可分为以下四个流程,分别是召回.粗排.精排以及重排: 召回是源头,在某种意义上决定着整个推荐的天花板: 粗排是初筛,一般不会上复杂模型: 精排是整个推荐环节的重中 ...

  9. 【三】tensorboard安装、使用教学以及遇到的问题

    相关文章: [一]tensorflow安装.常用python镜像源.tensorflow 深度学习强化学习教学 [二]tensorflow调试报错.tensorflow 深度学习强化学习教学 [三]t ...

  10. 20.5 OpenSSL 套接字RSA加密传输

    RSA算法同样可以用于加密传输,但此类加密算法虽然非常安全,但通常不会用于大量的数据传输,这是因为RSA算法加解密过程涉及大量的数学运算,尤其是模幂运算(即计算大数的幂模运算),这些运算对于计算机而言 ...