<img> inside <td> in PDF, image won't fit in cell

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.

<img> inside <td> in PDF, image won't fit in cell

Postby oceanclub on Thu Oct 15, 2020 8:45 am

I have some Flare topics which are converted from Markdown and there are some images which are directly inside a table cell, such as:

Code: Select all
      <td>
          <img src="Images%5Cadv_mode_button.png" alt="adv_mode_button" />
      </td>


However I create PDF output, the image does not fit inside the cell:

Image

In HTML5 output the image is resized to fit the cell correctly.

The CSS style used for both is the same:

Code: Select all
img
{
   border: none;
   max-width: 100%;
   height: auto;
}


I then tried adding the following to my stylesheet:

Code: Select all
td > img
{
   border: none;
   max-width: auto;
   height: auto;
}


However, the image still expands outside the cell.

Any help appreciated,

Paul
User avatar
oceanclub
Sr. Propeller Head
 
Posts: 229
Joined: Thu Oct 10, 2013 4:45 am
Location: Dublin

Re: <img> inside <td> in PDF, image won't fit in cell

Postby robdocsmith on Tue Oct 27, 2020 7:28 pm

Hey,

I think this is like the issue of right margin adherance in viewtopic.php?f=10&t=32535...

What happens if you embed the <img> inside a <p> element? For some reason, when sizing images using percentages (particularly max-width), the element can't seem to work out what the width of the container is (and therefore what the relative percentage should be) and it defaults display to the full size of the image.

Try changing to:

Code: Select all
<td>
     <p>
          <img src="Images%5Cadv_mode_button.png" alt="adv_mode_button" />
     </p>
</td>


Rob
robdocsmith
Propeller Head
 
Posts: 88
Joined: Thu May 24, 2018 3:11 pm


Return to Printed Documentation Targets

Who is online

Users browsing this forum: tatjana and 6 guests