將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; 
} 

允許根據需要適合所有你希望打印的圖像尺寸圖像儘可能多的空間。

這是一種解決方法，通常適用於我。