DIV的v-html属性 图片溢出问题

<template>
  <div class="dialog-content">
    <div class="dialog-h5" v-html="htmlContent"></div>
  </div>
</template>
<script>
  export default {
    name: 'demo',
    data() {
      return {
        htmlContent: "关外bai野店烟火绝客怎眠
					寒来袖间 谁为我du 添两件
					三四zhi更雪 风不减 吹袭一夜
					只是可怜 瘦马未得好歇
					怅然入梦 梦几月 醒几年
					往事凄艳 用情浅 两手缘
					鹧鸪清怨 听得见 飞不回堂前
					旧楹联红褪墨残谁来揭
					我寻你千百度  日出到迟暮
					一瓢江湖我沉浮  我寻你千百度  
					又一岁荣枯
					可你从不在 灯火阑珊处
					怅然入梦 梦几月 醒几年
					往事凄艳 用情浅 两手缘
					鹧鸪清怨 听得见 飞不回堂前
					旧楹联红褪墨残谁来揭
					我寻你千百度  日出到迟暮
					一瓢江湖我沉浮 我寻你千百度
					又一岁荣枯
					可你从不在 灯火阑珊处
					我寻你千百度  日出到迟暮
					一瓢江湖我沉浮 我寻你千百度
					又一岁荣枯  你不在灯火阑珊处<img src='大图片资源地址'/>"
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  .dialog-content {
    height: 100%;
    overflow-y:auto;
    overflow-x:hidden;
    width: 100%;
  }

  .dialog-h5 >>> img,p,span {
    width: 100%;
  }
</style>

猜你喜欢

转载自blog.csdn.net/wxzxmq/article/details/106815146