实现对文章内容的缩放

app/components/news/new.vue

@@ -47,8 +47,36 @@ onMounted(() => {
 
   // 加载JavaScript文件
   loadJSFiles()
+
+  // 强制处理图片样式
+  nextTick(() => {
+    forceImageStyles()
+  })
 })
 
+// 强制处理图片样式的方法
+const forceImageStyles = () => {
+  if (typeof document !== 'undefined') {
+    const images = document.querySelectorAll('.article-content img')
+    images.forEach((img: any) => {
+      // 强制设置样式
+      img.style.maxWidth = 'calc(50% - 20px)'
+      img.style.height = 'auto'
+      img.style.width = 'auto'
+      img.style.display = 'block'
+      img.style.margin = '15px 0'
+      img.style.boxSizing = 'border-box'
+    })
+  }
+}
+
+// 监听内容变化，重新处理图片样式
+watch(() => props.articleData.content, () => {
+  nextTick(() => {
+    forceImageStyles()
+  })
+}, {deep: true})
+
 const loadJSFiles = () => {
   const jsFiles = [
     '/news/jquery.1.11.3.min.js',
@@ -232,28 +260,95 @@ const loadCSSFiles = () => {
   line-height: 1.8;
   font-size: 14px;
   color: #333;
+  overflow: hidden; /* 防止内容溢出 */
+  word-wrap: break-word; /* 长单词换行 */
 }
 
 .article-content p {
   margin-bottom: 15px;
 }
 
+/* v-html 内容中的图片样式控制 */
 .article-content img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 15px 0;
+  max-width: calc(50% - 20px) !important; /* 确保不超过容器宽度，留出边距 */
+  height: auto !important; /* 高度自动调整，保持比例 */
+  width: auto !important; /* 宽度自动，配合max-width使用 */
+  display: block !important;
+  margin: 15px 0 !important;
+  box-sizing: border-box !important; /* 包含边框和内边距 */
+  /* 完全避免裁剪，确保图片完整显示 */
+  /* 使用 !important 确保覆盖内联样式 */
+}
+
+/* 针对 v-html 内容中可能存在的其他图片元素 */
+.article-content img[style*="width"],
+.article-content img[style*="height"] {
+  max-width: calc(50% - 20px) !important;
+  height: auto !important;
+  width: auto !important;
+}
+
+/* 确保所有图片元素都被控制 */
+.article-content * img {
+  max-width: calc(50% - 20px) !important;
+  height: auto !important;
+  width: auto !important;
+  display: block !important;
+  margin: 15px 0 !important;
+}
+
+/* 针对被包裹在span中的图片 */
+.article-content span img {
+  max-width: calc(50% - 20px) !important;
+  height: auto !important;
+  width: auto !important;
+  display: block !important;
+  margin: 15px 0 !important;
+}
+
+/* 强制覆盖所有可能的图片样式 */
+.article-content img[src] {
+  max-width: calc(50% - 20px) !important;
+  height: auto !important;
+  width: auto !important;
+  display: block !important;
+  margin: 15px 0 !important;
 }
 
 
 /* 响应式调整 */
 @media (max-width: 1024px) {
-
-
   .col-md-8, .col-md-4 {
     width: 100%;
     margin-bottom: 20px;
   }
+
+  /* 移动端图片控制 */
+  .article-content img,
+  .article-content img[style*="width"],
+  .article-content img[style*="height"],
+  .article-content * img,
+  .article-content span img,
+  .article-content img[src] {
+    max-width: calc(50% - 10px) !important;
+    margin: 10px 0 !important;
+    height: auto !important; /* 移动端保持比例 */
+    width: auto !important; /* 移动端宽度自动 */
+  }
+}
+
+/* 桌面端图片控制 */
+@media (min-width: 1025px) {
+  .article-content img,
+  .article-content img[style*="width"],
+  .article-content img[style*="height"],
+  .article-content * img,
+  .article-content span img,
+  .article-content img[src] {
+    max-width: calc(50% - 30px) !important; /* 桌面端留更多边距 */
+    height: auto !important; /* 桌面端保持比例 */
+    width: auto !important; /* 桌面端宽度自动 */
+  }
 }
 
 
@@ -355,4 +450,5 @@ const loadCSSFiles = () => {
   justify-content: center;
   align-items: center;
 }
-</style>
+</style>
+