You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

flying-saucer-pdf-itext5中img的max-width失效,求图片自适应PDF解决方案

解决flying-saucer-pdf-itext5中max-width不生效的图片适配问题

针对你遇到的max-width在flying-saucer-pdf-itext5 9.3.1中无法缩放图片的问题,给你几个实用的解决思路:

方案1:组合width与max-width属性

flying-saucer对width:100%的支持比单独的max-width更可靠,同时保留max-width限制最大宽度,这样图片会自适应容器且不超出设定上限。修改CSS如下:

.half-img {
    width: 100%;
    max-width: 283px;
    height: auto; /* 保持图片比例 */
}

HTML无需改动,这样图片会先占满父容器宽度,同时如果原宽超过283px,会被限制在283px内,自动按比例缩放高度。

方案2:通过父容器限制宽度

给图片所在的单元格设置固定宽度,再让图片占满整个单元格,利用容器的宽度约束实现图片缩放:

修改后的CSS

.img-container {
    width: 283px;
}
.half-img {
    width: 100%;
    height: auto;
}

修改后的HTML(给td添加容器类)

<table>
    <tr>
        <td class="table-top">
            <div class="number">1.</div>
            ae913d52-c459-48a2-b6b4-4e5a7b67f02a
        </td>
        <td class="table-top img-container">
            <div class="number">2.</div>
            <img class="half-img" src="xxx.jpg" alt=""/>
        </td>
    </tr>
    <tr>
        <td>
            <div class="number">3.</div>
            test text
        </td>
        <td class="table-last"></td>
    </tr>
</table>

这个方法利用容器的宽度强制图片适配,避免flying-saucer对max-width的支持缺陷。

方案3:Java代码预处理图片尺寸

如果上述CSS方案都不生效,可以在渲染PDF前用代码动态处理图片,根据图片实际尺寸设置inline样式:

// 用Jsoup解析HTML文档
Document doc = Jsoup.parse(yourHtmlContent);
Elements imgs = doc.select("img.half-img");

for (Element img : imgs) {
    // 获取图片实际尺寸(这里需要根据你的图片来源实现,比如从本地文件或URL读取)
    int originalWidth = getImageWidth(img.attr("src"));
    if (originalWidth > 283) {
        img.attr("style", "width:283px; height:auto;");
    } else {
        img.attr("style", "width:" + originalWidth + "px; height:auto;");
    }
}
// 用处理后的HTML渲染PDF
String processedHtml = doc.html();

这个方法直接给图片设置精确的宽度,完全规避CSS属性支持问题,适合图片尺寸差异大的场景。

内容的提问来源于stack exchange,提问作者Cjsah

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 05:07:27