Ajustement IMG dans l'élément à l'aide de BFO Report Generator dans NetSuite

Question

J'essaie de créer un rapport dynamique qui affichera une rangée d'images qui peuvent changer à chaque fois que le rapport est créé. J'ai essentiellement trois boîtes carrées pour afficher les images. Cependant, étant donné qu'il y aura peu ou pas de contrôle sur les sources, j'essaye de définir le CSS pour redimensionner les images pour qu'elles tiennent dans les conteneurs. Le mieux que je puisse faire finit par les forcer dans une taille qui brise les proportions, ce qui n'est pas bon car les images doivent être correctes et non déformées.

CSS actuel utilisé:

.thumb_a { border:1px; border-color:#000000; padding:3px; width:230px; height:230px; } 
.thumb_b { border:1px; border-color:#FFFFFF; width:220px; height:220px; } 

structure HTML actuelle:

<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> 

J'avais initialement essayé de pose cela avec DIVs, mais dès que j'ai ajouté des images qu'ils ne sont restés plus longtemps ensemble dans un rangée. En outre, j'avais toujours le même problème avec eux soit en expansion au-delà des contraintes de leur élément contenant, soit en l'étirant pour remplir l'élément conteneur. Les attributs CSS tels que max-height et max-width ne semblent pas être reconnus dans le générateur de rapport de BFO.

J'ai aussi essayé les suivantes:

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> 

Cela a fonctionné pour quelques images, mais pas d'autres. Je me suis quand même retrouvé avec un mélange d'images qui se glissaient dans le conteneur et des images qui agrandissaient le conteneur, même si elles ne sont plus à leur taille d'origine.

Answer 1

Vous avez raison: la hauteur maximale et la largeur maximale ne sont pas reconnues par le générateur BFO. Il semble qu'il n'y ait aucun moyen de redimensionner automatiquement une image pour l'adapter à un élément tout en conservant des proportions.

J'ai rencontré ce problème plusieurs fois et la meilleure solution que j'ai eu est de définir la hauteur de l'image à un nombre défini de pixels. Ensuite, je définis la largeur à auto (ou vice versa). Comme ceci:

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

ou

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

prévoir autant d'espace pour les images que nécessaire pour adapter à toutes les tailles d'image que vous attendez d'imprimer.

C'est une solution de contournement qui fonctionne habituellement pour moi.