CKEditor5图片缩放异常求助：设置尺寸未按预期生效

问题原因 #

在CKEditor5中调整图片宽度为200px时，编辑器仅给外层<figure>添加了width:200px样式，但<img>标签仍保留原始的width="1280"属性。浏览器渲染时，<img>的原生width属性优先级高于父容器样式，导致图片无法按设置的200px显示。

解决方案 #

方案1：前端CSS强制覆盖（快速见效） #

在页面全局样式中添加以下CSS规则，强制图片继承父容器宽度并保持比例：

.image.image_resized img {
  width: 100% !important;
  height: auto !important;
}

原理：width:100%让图片占满<figure>的宽度，height:auto配合图片的aspect-ratio属性自动维持正确比例，!important确保覆盖<img>原生width属性的优先级。

方案2：修改CKEditor5配置，同步更新img尺寸属性 #

让编辑器在调整图片大小时，同时修改<img>的width属性，而不是仅调整<figure>样式。初始化编辑器时添加如下配置：

ClassicEditor
  .create(document.querySelector('#editor'), {
    image: {
      resizeUnit: 'px',
      // 配置预设的缩放尺寸（可选）
      resizeOptions: [
        { name: 'imageResize:original', label: '原始尺寸', value: null },
        { name: 'imageResize:200', label: '200px', value: 200 }
      ],
      // 启用调整尺寸时同步更新img的width/height属性
      resizeImage: {
        updateDimensions: true
      }
    }
  })
  .catch(error => {
    console.error(error);
  });

配置后，调整图片尺寸时，编辑器会同时修改<figure>的样式和<img>的width属性，确保浏览器按设置的尺寸渲染。

方案3：自定义图片上传处理钩子（针对Base64图片） #

如果是上传Base64格式图片，可在上传阶段直接调整图片尺寸，避免后续缩放问题。示例代码：

ClassicEditor
  .create(document.querySelector('#editor'), {
    imageUpload: {
      // 自定义上传前的图片处理
      beforeUpload: (files) => {
        return Promise.all(Array.from(files).map(file => {
          return new Promise((resolve) => {
            const img = new Image();
            img.onload = () => {
              const canvas = document.createElement('canvas');
              const targetWidth = 200; // 目标宽度
              const scale = targetWidth / img.width;
              canvas.width = targetWidth;
              canvas.height = img.height * scale;
              const ctx = canvas.getContext('2d');
              ctx.drawImage(img, 0, 0, targetWidth, canvas.height);
              canvas.toBlob(blob => {
                resolve(new File([blob], file.name, { type: file.type }));
              }, file.type);
            };
            img.src = URL.createObjectURL(file);
          });
        }));
      }
    }
  })
  .catch(error => {
    console.error(error);
  });

该方案在图片上传前就将其缩放到目标尺寸，插入编辑器后无需再调整。

内容的提问来源于stack exchange，提问作者Dani Carla