Vue中使用v-html内容图片过大的解决方法

在同事的项目中遇到一个问题,使用 Vue 的 v-html 后,内容里边的图片太大,显示不全。

但是设置 style 又不管用:

.img {
  max-width: 100%;
  height: auto;
}

实际上还是 Vue 的 scoped 穿透问题:参考我之前的文章(Vue项目中scoped属性的作用,及scoped穿透

<style scoped>
  .content >>> .img {
    max-width: 100%;
    height: auto;
  }
</style>

这样就可以解决 Vue 中 v-html 内容样式设置不了的问题了。

推荐阅读:

HTML引入文件的绝对路径、相对路径、根目录

判断网页是通过PC端还是移动终端打开的

分享一些实用的Chrome DevTools技巧

JetBrains IDE Support 浏览器自动刷新插件(不定时更新)

腾讯云IIS 百度HTTPS认证失败必读及抓取诊断

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)