通过接口获取的数据是富文本,其中带有图片,怎么改变图片的大小?

这篇博客讨论了如何处理通过接口获取并使用'v-html'渲染到页面上的富文本中图片大小超出屏幕的问题。建议使用CSS的>>>选择器或Vue的::v-deep来修改内联样式,设置图片宽度为100%以适应屏幕。对于SCSS,由于>>>无法编译,可以使用::v-deep作为替代。文章还提到了/deep/在某些情况下可能引发错误。
摘要由CSDN通过智能技术生成

这一段是通过接口获取的富文本,通过在标签中写入‘v-html’渲染到了页面上,但是图片大小溢出了屏幕。

想改变图片大小,可通过 ‘>>>’ 属性穿透 。

如果是用的是css原生样式,可通过‘>>>’解决。

.htmlContent>>>img {
  // padding: 15px;
  // /deep/ img {
    width: 100%;
  // }
}

如果是scss 预处理器,因为‘>>>’无法编译,可使用::v-deep代替

.htmlContent {
  ::v-deep img {
    width: 100%;
  }
}

/deep/会报错 不晓得为什么

.htmlContent {
  /deep/ img {
    width: 100%;
  }
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值