uniapp开发小程序使用vue的v-html解析富文本图片过大过宽显示超过屏幕解决办法

如果没有设置的话,就会导致图片溢出,过宽显示或者错位显示,显示效果非常的丑陋:

修改后显示的效果:

网上比较low的解决办法:网上各种解决方法核心思想就是在数据层把数据模板上的img数据加上style样式:max-width:100%;,使每个img标签达到想自己要的效果。但是不推荐

其实解决办法很简单,就是添加一个css样式,给全局的img标签添加,所以要找到富文本里面图片标签,然后给它添加css样式,最好添加属性选择器: 

img,
[alt],
img[alt] {
    max-width: 100%;
}

如果没有生效,可以看一下你的img标签是不是带有alt属性。

如果还是没有生效,检查一下css有没有作用到页面里,还是有问题的话可以尝试一下其他的css选择器。

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-09 06:50:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-09 06:50:05       100 阅读
  3. 在Django里面运行非项目文件

    2024-05-09 06:50:05       82 阅读
  4. Python语言-面向对象

    2024-05-09 06:50:05       91 阅读

热门阅读

  1. Rancher Deployment (Helm)

    2024-05-09 06:50:05       38 阅读
  2. [工程构建] 使用pkg-config协助工程搭建

    2024-05-09 06:50:05       34 阅读
  3. 深入探索:npm详解

    2024-05-09 06:50:05       35 阅读
  4. React 学习-3

    2024-05-09 06:50:05       29 阅读
  5. 001 websocket(评论功能demo)(消息推送)

    2024-05-09 06:50:05       27 阅读
  6. react 项目中使用 iconfont

    2024-05-09 06:50:05       31 阅读
  7. Kafka 环境搭建之伪分布式集群模式详细教程

    2024-05-09 06:50:05       26 阅读