[js][css] 用 CSS+JS 实现：小图不居中，大图限高居中

CSS：

/* 图片限高限宽，小图不居中 */
.protyle-wysiwyg [data-node-id] .img img {
/* 图片最大宽度不能超过容器的100%，这样图片会随窗口变小而自动缩小 */
max-width: 100% !important;
/* 图片最大高度不能超过800像素，防止图片太高撑开页面 */
max-height: 800px !important;
/* 图片宽度要自动调整，保持原始比例不变 */
width: auto !important;
/* 图片高度要自动调整，保持原始比例不变 */
height: auto !important;
/* 保持图片长宽比完整显示，不裁剪、不拉伸 */
object-fit: contain !important;
/* 默认小图片使用行内块显示，不居中 */
display: inline-block !important;
/* 小图与左右文字保持2px的间距 */
/* margin: 0 2px !important;
/* 解决图片底部多余空白的问题，让图片与文字底部对齐 */
vertical-align: text-bottom !important;
}

/* 设置图片容器默认不居中 */
.protyle-wysiwyg [data-node-id] .img {
/* 容器宽度自适应，跟随内容变化 */
width: auto !important;
/* 容器内的内容（图片）左对齐 */
text-align: left !important;
/* 关键代码：让容器只包裹图片本身，不额外留上下空白 */
display: inline-block !important; /* 这个是解决边距问题的核心！*/
/* 容器高度自动适应图片高度，不多不少 */
height: auto !important;
/* 清除容器内部上下左右的空白边框（内边距） */
padding: 0 !important;
/* 清除容器外部上下左右的空白边框（外边距） */
margin: 0 !important;
/* 恢复正常行高 */
line-height: normal !important;
}

/* 将图片拖拽调节杆移到右侧垂直居中 */
.protyle-wysiwyg [data-node-id] .img .protyle-action__drag {
position: absolute !important;
right: 5px !important;          /* 距离右边5像素 */
top: 50% !important;            /* 垂直居中 */
transform: translateY(-50%) !important; /* 精确垂直居中 */
}

/* 大图片样式 - 居中显示 */
.protyle-wysiwyg [data-node-id] .img img.large-image-centered {
/* 大图片使用块级显示，居中 */
display: block !important;
margin: 0 auto !important;
}

/* 大图片容器样式 - 居中 */
.protyle-wysiwyg [data-node-id] .img.large-image-container {
text-align: center !important;
display: inline-block !important;
width: 100% !important;
margin: 0 !important;
height: auto !important;
padding: 0 !important;
line-height: 0 !important;
}

JS：

// 监听图片加载和 DOM 变化
function checkAndAdjustImages() {
    const images = document.querySelectorAll('.protyle-wysiwyg [data-node-id] .img img');
  
    images.forEach(img => {
        // 等待图片加载完成
        if (img.complete) {
            adjustImageIfNeeded(img);
        } else {
            img.onload = () => {
                adjustImageIfNeeded(img);
            };
        }
    });
}

function adjustImageIfNeeded(img) {
    // 获取图片的实际宽度
    const actualWidth = img.naturalWidth || img.width;
  
    // 如果图片宽度超过500px，则应用居中样式
    if (actualWidth > 500) {
        // 给图片添加大图片类名
        img.classList.add('large-image-centered');
    
        // 给容器添加大图片容器类名
        const container = img.closest('.img');
        if (container) {
            container.classList.add('large-image-container');
        }
    } else {
        // 小图片移除样式
        img.classList.remove('large-image-centered');
    
        // 移除容器的大图片类名
        const container = img.closest('.img');
        if (container) {
            container.classList.remove('large-image-container');
        }
    }
}

// 监听 DOM 变化，处理新插入的图片
const observer = new MutationObserver((mutations) => {
    let shouldCheck = false;
  
    mutations.forEach((mutation) => {
        if (mutation.type === 'childList') {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeType === 1) { // 元素节点
                    if (node.querySelector && node.querySelector('.img img')) {
                        shouldCheck = true;
                    }
                }
            });
        }
    });
  
    if (shouldCheck) {
        setTimeout(checkAndAdjustImages, 100); // 延迟执行，确保图片加载完成
    }
});

// 开始监听
observer.observe(document.body, {
    childList: true,
    subtree: true
});

// 页面加载完成后执行
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', checkAndAdjustImages);
} else {
    setTimeout(checkAndAdjustImages, 500); // 延迟执行确保图片加载完成
}

// 也可以定期检查（可选）
setInterval(checkAndAdjustImages, 1000);