如何通过HTML和CSS在Java Swing的JTextPane中设置图片尺寸

问题原因 #

JTextPane依赖的HTMLEditorKit仅支持有限的CSS特性，主要覆盖文本样式（如颜色、字体），图片的width/height这类CSS属性不在其支持范围内，因此你的CSS类设置会被直接忽略。

可行解决方案 #

方案1：直接使用img标签的原生width/height属性

这是最简便有效的方法，HTMLEditorKit完全支持<img>标签的原生尺寸属性，直接在标签内指定即可：

修改后的核心代码：

pane.setText(
        "<html>"+
            "<head> <style>"+
                    ".text { color: red; font-family: \"Times New Roman\"; }"+
            "</style> </head>"+
            "<body>"+
                "<p class=\"text\"> Aaaa. </p>"+
                // 直接在img标签中设置宽度，高度会自动按比例缩放
                "<img src=\""+imageUrl+"\" width=\"250\" />"+
            "</body>"+
        "</html>"
    );

如果需要固定宽高，同时设置width和height属性即可；若要保持图片比例，仅设置其中一个属性即可。

方案2：自定义ImageView实现灵活尺寸控制

如果需要动态调整或批量处理图片尺寸，可以自定义HTMLEditorKit的ImageView，重写尺寸计算逻辑：

import java.awt.Dimension;
import javax.swing.JFrame;
import javax.swing.JTextPane;
import javax.swing.text.Element;
import javax.swing.text.View;
import javax.swing.text.html.HTMLFactory;
import javax.swing.text.html.HTMLEditorKit;
import javax.swing.text.html.ImageView;

public class App extends JFrame {

    private void run() {
        setSize(new Dimension(320, 240));
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JTextPane pane = new JTextPane();
        pane.setContentType("text/html");
        
        // 替换默认EditorKit，使用自定义ImageView
        HTMLEditorKit kit = new HTMLEditorKit() {
            @Override
            public ViewFactory getViewFactory() {
                return new HTMLFactory() {
                    @Override
                    public View createView(Element elem) {
                        View view = super.createView(elem);
                        if (view instanceof ImageView) {
                            return new CustomImageView((ImageView) view);
                        }
                        return view;
                    }
                };
            }
        };
        pane.setEditorKit(kit);

        String imageUrl = getClass()
                              .getClassLoader()
                              .getResource("resources/img.jpg")
                              .toExternalForm();
        
        pane.setText(
                "<html>"+
                    "<head> <style>"+
                            ".text { color: red; font-family: \"Times New Roman\"; }"+
                            ".pic { --target-width: 250; }"+ // 自定义CSS属性传递尺寸参数
                    "</style> </head>"+
                    "<body>"+
                        "<p class=\"text\"> Aaaa. </p>"+
                        "<img class=\"pic\" src=\""+imageUrl+"\" />"+
                    "</body>"+
                "</html>"
            );
        
        getContentPane().add(pane);
        setVisible(true);
    };

    // 自定义ImageView，读取CSS自定义属性设置宽度
    private static class CustomImageView extends ImageView {
        public CustomImageView(ImageView original) {
            super(original.getElement());
        }

        @Override
        public float getPreferredSpan(int axis) {
            if (axis == View.X_AXIS) {
                // 从元素属性中读取自定义CSS参数
                String styleAttr = (String) getElement().getAttributes().getAttribute("style");
                if (styleAttr != null && styleAttr.contains("--target-width")) {
                    try {
                        String widthValue = styleAttr.split("--target-width: ")[1].trim();
                        return Float.parseFloat(widthValue);
                    } catch (Exception e) {
                        // 解析失败则使用默认尺寸
                        return super.getPreferredSpan(axis);
                    }
                }
                // 也可以直接硬编码固定宽度
                // return 250;
            }
            return super.getPreferredSpan(axis);
        }
    }

    public App() {
        super("Test HTML+CSS");
    }

    public static void main(String[] args) {
        App app = new App();
        app.run();
    }
}

这个方案通过自定义ImageView，可以实现基于CSS自定义属性的动态尺寸控制，适合复杂场景下的批量调整需求。

总结 #

直接使用<img>标签的原生width/height属性是解决该问题的最优方案；如果需要更灵活的尺寸控制，再考虑自定义ImageView的方式，无需在CSS类上浪费精力。

内容的提问来源于stack exchange，提问作者Andrey Voeyko