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>

我最初尝试用DIV进行此操作，但是一旦我添加了图像，他们就不再连续在一起了。此外，我仍然有同样的问题，要么扩展超出其包含元素的约束，要么拉伸以填充包含元素。 max-height 和 max-width 等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

BVD生成器无法识别max-height和max-width是正确的。似乎没有办法在保持比例的同时自动调整图像大小以适合元素。

我已多次遇到此问题，而我所拥有的最佳解决方案是将图像高度设置为指定的像素数。然后我将宽度设置为auto（反之亦然）。像这样：

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

或

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

根据需要为图像留出足够的空间，以适合您希望打印的所有图像尺寸。

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

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

1 个答案: