Как центрировать изображение штрих-кода в таблице?

Question

Я пытаюсь определить этикетку со штрих-кодом в odoo, она хорошо печатается, если она короткая, в противном случае штрих-код go над границей таблицы, и я не могу прочитать ее с помощью ридера, иногда она печатает в 2-х этикетках, если имя в первой ячейке длинная, поэтому мне нужно установить фиксированный размер для таблицы, здесь 2 скриншота для меток

вот код

 <div class="col-xs-4" style="padding:0;" align="center">
                    <table class="table table-bordered mb-0" width="50mm" style="padding:0"  >
                      <tr  style="font-size: 50%;;padding:0" align="center" valign="center">
 <td style="font-size: 110%;;padding:0">
                            <strong t-field="product.name"/>
</td>
                      </tr>
                      <tr style="margin:0 auto;padding:0 auto;" align="center">
                        <td style="padding:1" align="center" colspan = "2">
                            <img t-if="product.barcode" t-att-src="'/report/barcode/?type=%s&amp;value=%s&amp;width=%s&amp;height=%s' % ('Code128', product.barcode,600 ,150)" style="width:120%;height:30%;margin:0 auto;padding:0 auto;"/>
                            <br style="text-align: center;padding:1;">     
                                <span  style="font-size: 6px;text-align: center;" t-field="product.barcode"/>
                            </br>
                        </td>
                      </tr>
                      <tr style="text-align: center;">
                        <td style="font-size: 50%;padding:0">www.autopartsegypt.com</td>
                      </tr>
                    </table>
             </div>

Answer 1

Попробуйте этот фрагмент, я использую object fit с width, дайте мне знать, если это хорошо печатается, вы можете установить его width на 100% или в px, как вы хотите

img{
max-width: 100%;
}
.img-wrap img{
width: 200px;
object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<table class="table table-bordered mb-0" style="text-align: center;" >
<tr >
<td >
<strong t-field="product.name">product.name</strong>
</td>
</tr>
<tr style="margin:0 auto;padding:0 auto;" align="center">
<td style="padding:1" align="center" colspan = "2"><div class="img-wrap">
<img src="https://i.stack.imgur.com/mqCU0.gif" style=""/></div>
<br style="text-align: center;padding:1;">
<span style="" t-field="product.barcode">product.barcode</span>

</td>
</tr>
<tr style="text-align: center;">
<td style="">www.autopartsegypt.com</td>
</tr>
</table>

Answer 2

Попробуйте использовать margin-right:1%; для тега img или таблицы и увеличьте процентное значение, как требуется.