Подгонка IMG к элементу с помощью генератора отчетов BFO в NetSuite

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, но как только я добавил изображения, они больше не оставались в ряду. Кроме того, у меня все еще была та же проблема: они выходили за пределы ограничений содержащего их элемента или растягивались для заполнения содержащего элемента. Такие атрибуты CSS, как max-height и max-width, по-видимому, не распознаются в генераторе отчетов 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

Вы правы, что max-height и max-width не распознаются генератором BFO. Кажется, что нет способа автоматически изменить размер изображения, чтобы оно соответствовало элементу, сохраняя пропорции.

Я сталкивался с этой проблемой несколько раз, и лучшее решение, которое у меня было, - установить высоту изображения на определенное количество пикселей. Затем я установил ширину на авто (или наоборот). Как это:

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

или же

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

Предоставьте столько места для изображений, сколько нужно для всех размеров изображения, которые вы ожидаете напечатать.

Это обходной путь, который обычно работает для меня.