技术栈

Vue v-html中内容图片过大自适应处理

我是唐赢2024-01-01 13:03

之前图片如下,图片已经超出了页面的展示范围

对v-html增加样式处理

javascript 复制代码
<div class="body padding-l scroll " v-html="docData.content">       
</div>


<style scoped>

    .body >>> img {
        max-width: 100% ;
    }
</style>

效果如下:

上一篇:图片预览 element-plus 带页码
下一篇:docker的安装的详细教程,以及出现错的解决办法(阿里云)
相关推荐
ZC跨境爬虫
3 小时前
跟着 MDN 学CSS day_16:(深入掌握背景与边框的艺术)
前端·css·ui·html·tensorflow
愚者Pro
5 小时前
Flutter Widget组件学习(专为 Uniapp 转 Flutter 定制)
vue.js·学习·flutter·uni-app
道里
5 小时前
花了 5 万刀用 AI 写代码之后,这是我的全部经验
前端·人工智能
Royzst
5 小时前
xml知识点
java·服务器·前端
IT_陈寒
6 小时前
React useEffect闭包陷阱差点把我整失业了
前端·人工智能·后端
kyriewen
7 小时前
推行AI写代码一年后,Code Review变成了新的加班理由
前端·ai编程·cursor
前端环境观察室
7 小时前
给 Agent Browser Workflow 加一层可观测性:Trace、Snapshot 和 Review Queue
前端
柒瑞
7 小时前
Superpowers结合Claude code浅实战
前端
Nian.Baikal
7 小时前
从零搭建离线地图服务:Nginx + Cesium/Leaflet 实战指南
运维·前端·nginx
前端毕业班
8 小时前
uniapp web 灵活控制 style scoped
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03【踩坑记录 | 第一篇】微软商店无法使用时,如何手动安装 OpenAI Codex?附`.msix`文件系统错误解决方法04【AI】2026 年具身智能模型和世界模型总结05裂开!ChatGPT 居然开始要手机号验证,附详细解决方法06CC-Switch & Claude 基于 Linux 服务器安装使用指南07Codegraph 实战:用知识图谱让 AI 编程效率翻倍08Codex使用DeepSeek API的方法(cc switch + codex bridge方案)09CC-Switch 全平台下载、安装与使用全指南(Windows/macOS/Linux)10给 Claude Code 装上“技能库”和“眼睛”:配置 Skills 与图片识别实战