1

I'm trying to create a dynamic report that will display a row of images that can change every time the report is created. I essentially have three square boxes to display the images. However, given that there will be little to no control over the sources, I'm trying to define the CSS to resize the images to fit within the containers. The best I can do ends up forcing them into a size that breaks the proportions, which is not good because the images need to be correct and not distorted.

Current CSS used:

.thumb_a { border:1px; border-color:#000000; padding:3px; width:230px; height:230px; }
.thumb_b { border:1px; border-color:#FFFFFF; width:220px; height:220px; }

Current HTML structure:

<table table-layout="fixed" border="0" style="width:720px;" cellmargin="0" cellpadding="0">
  <tr><td width="230px"><div class="thumb_a"><div class="thumb_b" style="background-image:img_a.jpg;" align="center" vertical-align="middle"></div></div></td>
  <td width="15px">&nbsp;</td>
  <td width="230px"><div class="thumb_a"><div class="thumb_b" style="background-image:img_b.jpg;" align="center" vertical-align="middle"></div></div></td>
  <td width="15px">&nbsp;</td>
  <td width="230px"><div class="thumb_a"><div class="thumb_b" style="background-image:img_c.jpg;" align="center" vertical-align="middle"></div></div></td></tr>
</table>

I had originally tried laying this out with DIVs, but as soon as I added images they no longer stayed together in a row. Also, I still had the same issue with them either expanding beyond the constraints of their containing element, or stretching to fill the containing element. CSS attributes such as max-height and max-width do not appear to be recognized within BFO's report generator.

I had also tried the following:

CSS:

.thumb_a { border:1px; border-color:#000000; padding:3px; width:230px; height:230px; }
.thumb_c { max-width:220px; max-height:220px; position:relative; top:0; bottom:0; left:0; right: 0; }

HTML:

<td width="230px"><div class="thumb_a"><img dpi="200" height="220px" class="thumb_c" src="img_a.jpg" align="center" vertical-align="middle" /></div></td>

This worked for some images, but not others. I still ended up with a mix of images fitting within the container and images enlarging the container, even though they we no longer at their original size.

Michael McCauley
  • 853
  • 1
  • 12
  • 37

1 Answers1

0

You are correct that max-height and max-width are not recognized by BFO generator. There seems to be no way to automatically resize an image to fit within an element while maintaining proportions.

I've run into this issue several times and the best solution I've had is to set the image height to a defined number of pixels. Then I set the width to auto (or vice versa). Like this:

.myimage {
    height: 100px;
    width: auto;
}

or

.myimage {
    height: auto;
    width: 100px;
}

Allow as much room for the images as needed to fit all the image sizes you would expect to print.

It's a workaround that usually works for me.

The Windhover
  • 312
  • 3
  • 16
  • Took a while before I could get back to this... Yeah, this is something I've tried before, but depending on the image proportions it sometimes allows the image to expand out the containing DIV. – Michael McCauley Jul 27 '17 at 19:38