1

我正在尝试创建一个动态报告，该报告将显示一行可以在每次创建报告时更改的图像。我基本上有三个方框来显示图像。但是，鉴于对源几乎没有控制，我正在尝试定义 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 进行布局，但是一旦我添加了图像，它们就不再连续在一起了。此外，我仍然遇到同样的问题，它们要么扩展超出其包含元素的约束，要么拉伸以填充包含元素。BFO 的报告生成器中似乎无法识别诸如max-height和max-width之类的 CSS 属性。

我还尝试了以下方法：

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>

这适用于某些图像，但不适用于其他图像。我最终还是混合了适合容器的图像和放大容器的图像，即使它们不再是原始大小。

4

1 回答 1

0

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

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

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

或者

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

根据需要为图像留出尽可能多的空间，以适应您希望打印的所有图像尺寸。

这是一种通常对我有用的解决方法。

于 2017-06-26T19:03:18.540 回答