diff --git a/app/components/news/new.vue b/app/components/news/new.vue index 77a22fd..3ab975d 100644 --- a/app/components/news/new.vue +++ b/app/components/news/new.vue @@ -60,7 +60,7 @@ const forceImageStyles = () => { const images = document.querySelectorAll('.article-content img') images.forEach((img: any) => { // 强制设置样式 - img.style.maxWidth = 'calc(50% - 20px)' + img.style.maxWidth = 'calc(100% - 20px)' img.style.height = 'auto' img.style.width = 'auto' img.style.display = 'block' @@ -268,53 +268,6 @@ const loadCSSFiles = () => { margin-bottom: 15px; } -/* v-html 内容中的图片样式控制 */ -.article-content img { - 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) { @@ -323,32 +276,7 @@ const loadCSSFiles = () => { 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; /* 桌面端宽度自动 */ - } }