WindowBird/ct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

实现对文章内容的缩放-样式精简

Browse Source
This commit is contained in:
WindowBird 2025-10-13 10:44:46 +08:00
parent 894052284b
commit e35a5e0577
1 changed files with 1 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/components/news/new.vue
View File

@ -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; /* 桌面端宽度自动 */
}
}