I'm having trouble getting images in 2-column tables working in PDF (they work fine in HTML). It seems to be something to do with the width and max-width attributes.
I want them to be shrunk to fit within their cell *if* they are wide.
But if I set 'width: 100%' the big images shrink nicely, but little icons grow huge to fit the cell. And if I set 'max-width: 100%' the little icons fit nicely at their native size, but the big ones display full size, pushing the vertical seperator line (in their body rows, not the header row) rightwards.
It's almost like the max-width setting isn't working on the basis of the cell width.
The table doesn't have any column widths set in the table style, its just 'fit to contents'. I'm hoping not to have to do that, as some tables have narrow first columns, and some need to be 50/50 width, and I can't apply two table stylesheets.
I'm using the selector 'table.StyleOfAffectedTables img' to select the images, and I'm using 'display:block'.
I don't mind mixing table and document stylesheets to get it working, as long as what I do only lives in the Print mediums.
Any suggestions would be welcome!
EDIT: Now that I found this: viewtopic.php?f=10&t=32852&p=141544&hilit=width#p141544
The solution seems to be to get the images in the cell enclosed by <p></p>, but how would I do that for files that go straight from Markdown through Madbuild? I initially thought to use 'Cell content style' in the Table Style editor, but that doesn't seem to work, in so far as after setting it, I can't see any P tags in what I've imported.
IMGs not setting table column widths
-
- Sr. Propeller Head
- Posts: 103
- Joined: Thu Sep 11, 2014 2:06 am
Re: IMGs not setting table column widths
Not sure if this will help in your situation, but in the past, I have had success with the object-fit property to size images inserted in a table
img.shrinkFit /*used to fit image inside container */
{
object-fit: scale-down;
}
img.shrinkFit /*used to fit image inside container */
{
object-fit: scale-down;
}