用NetSuite中的BFO报表生成器将IMG拟合成单元

Question

我正在尝试创建一个动态报告，它将显示一行图像，每次创建报表时都可以更改。我基本上有三个方框来显示图像。但是，考虑到对源几乎没有控制，我试图定义CSS来调整图像的大小以适应容器中的需要。我所能做的最好的就是强迫他们达到一个打破比例的大小，这是不好的，因为图像必须是正确的，而不是扭曲的。

目前使用的CSS：

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

当前的HTML结构：

<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>

我本来试着用DIVs把这个放出来，但是我一添加图像，他们就不再一排排地在一起了。而且，我仍然对它们有相同的问题，要么扩展到其包含元素的约束之外，要么拉伸来填充包含的元素。的最大高度和最大宽度等CSS属性在BFO的报表生成器中似乎无法识别。

我还尝试了以下几点：

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>

这对一些图像有效，但对另一些则无效。我最后还是得到了一个混合的图像，适合于容器和图像放大的容器，尽管他们的我们不再以他们原来的大小。

Answer 1

BFO生成器无法识别最大高度和最大宽度，这是正确的.在保持比例的同时，似乎没有办法自动调整图像的大小以适应元素。

我已经多次遇到这个问题，最好的解决方案是将图像高度设置为一定数量的像素。然后，我将宽度设置为auto (反之亦然)。如下所示：

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

或

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

为图像留出尽可能多的空间，以适应您希望打印的所有图像大小。

这是一个通常对我有用的解决办法。