将IMG插入NetSuite中使用BFO报告生成器的元素

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> 

我本来试图与资料核实铺设了这一点，但只要我添加的图像，他们不再一起住在一行。另外，我仍然遇到同样的问题，要么扩展到包含元素的限制之外，要么扩展到填充包含元素。 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发生器无法识别最大高度和最大宽度。似乎没有办法在保持比例的同时自动调整图像大小以适应元素。

我已经遇到过这个问题多次，我已经有的最佳​​解决方案是将图像高度设置为指定数量的像素。然后我将宽度设置为自动（或反之亦然）。就像这样：

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

或

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

允许根据需要适合所有你希望打印的图像尺寸图像尽可能多的空间。

这是一种解决方法，通常适用于我。