前景: pc端 在新建完文章后,查看详情中的文章内容展示的时候发现,新建的文章内容中上传的图片巨大的时候是在web端溢出不太好看,页面被图片撑大了出现x方向的滚动条。
一开始想的是设置下页面吧?后来还是决定限制图片的大小吧
在网上查了一圈终于看到了方法,同时由于我们的项目中用的是less,一开始写的时候报错了,后来我改了一下,也把原先的<style scoped lang="less">
修改成下面所示就可以了
这里要注意:这里的>>>需要使用css语法,写在less里会报错
<style scoped>
/* 传来富文本中的图片过大限制 */
p >>> img {
display: inline-block;
max-width: 100% !important;
height: auto !important; /*防止图片变形*/
}
</style>
如果富文本解析传来表格,则处理为
/* 富文本中表格样式设置 */
/* p >>> table {
display: flex !important;
} */
p >>> table tr {
border-right: 1px solid #e0e0e0 !important;
border-bottom: 1px solid #e0e0e0 !important;
border-top: 1px solid #e0e0e0 !important;
}
p >>> table td {
/* flex: 1; */
padding: 5px;
font-size: 12px;
border-left: 1px solid #e0e0e0;
word-break: break-all;
}