Images in Table Cells Overflow When Converting HTML to Word

Aspose.Words Product Family
1

When converting HTML to Word using Aspose.Words, images inside table cells overflow or fail to resize dynamically. I expect the images to fit within the cell without affecting the table layout.

HTML Example:

<html lang="en">
<head>
    <meta charset="UTF-8">
	<style>
			img {
				max-width: 100%;
				height: auto;
			}
			td {
				overflow-wrap: anywhere;
			}
			pre {
				overflow-x: auto;
				white-space: pre-wrap;
				word-wrap: break-word;
				overflow-wrap: anywhere;
			}

	</style>
</head>
<body>
    <div>
        <h2>Stories</h2>
        <table style="border-collapse: collapse; width: 100%; table-layout: fixed; border: 1px solid #cccccc;">
            <thead>
                <tr>
                    <th style="border: 1px solid #cccccc; padding: 10px; text-align: left; font-weight: bold;">
                        Description
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="border: 1px solid #cccccc; padding: 10px; word-wrap: break-word; overflow-wrap: break-word;">
                        <div style="">
                            <img src="https://arn-dev-resources.s3.ap-south-1.amazonaws.com/b83c0874-1705-3bd5-834a-e792a3f176b8/10003/113/images/arn_file_2024-11-26-21-18-45-813.jpeg"  alt="Example Image" style="max-width: 100%; height: auto;" />
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

attachement after conversion.

631×754 86.5 KB

Environment Details:

  • Aspose.Words version: 23.x.x
  • Java version: OpenJDK 17
  • OS: Windows 11
2

@karan007 You should note, that Aspose.Words is designed to work with MS Word documents. HTML documents and MS Word documents object models are quite different and it is not always possible to provide 100% fidelity after conversion one model to another. In most cases Aspose.Words mimics MS Word behavior when work with HTML.
As I can see Aspose.Words and MS Word outputs look simmilar.
Aspose.Words: out.docx (261.1 KB)
MS Word: ms.docx (13.3 KB)

You can try explicitly specify size of shape in your HTML.

3

Thank you for your response and clarification regarding the differences between the object models of HTML and MS Word. I understand that Aspose.Words is primarily designed to work with MS Word documents and aims to mimic its behavior.

However, in my case, I need to achieve specific formatting requirements during the conversion process. Explicitly specifying the size of shapes in HTML sounds like a viable solution. Could you please provide a brief example or best practices on how to define shape sizes in HTML so that Aspose.Words can render them accurately in the resulting Word document?

Additionally, if there are any other recommendations to enhance fidelity during HTML-to-Word conversion, I’d greatly appreciate your insights.

Thanks again for your support!

4

@karan007 You can specify image size in img tag using width and height attributes:

<img width="100" height="100" src="https://arn-dev-resources.s3.ap-south-1.amazonaws.com/b83c0874-1705-3bd5-834a-e792a3f176b8/10003/113/images/arn_file_2024-11-26-21-18-45-813.jpeg" alt="Example Image" style="max-width: 100%; height: auto;" />