如何在表格中居中放置条形码图像?

本文介绍了如何在表格中居中放置条形码图像?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在odoo中设计条形码标签，如果条形码较短，则会很好地打印，否则条形码会越过表格边框，并且我无法用阅读器读取它，有时如果名称在2个标签中也会打印出来第一个单元格很长 所以我需要为表格设置固定大小 这是标签的2个屏幕截图

i'am trying to desgine barcode label in odoo it printed well if it short barcode otherwise the barcode go over the table border and i can't read it with reader also sometimes it print in 2 label if the the name is in first cell is long so i need to set fixed size for the table here is 2 screenshots for the labels

这是代码

<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</td> </tr> </table> </div>

推荐答案

尝试使用此代码段，我将object fit与width结合使用，请让我知道是否 打印效果很好，您可以将其width设置为100%或在px中 任何你想要的

Try this snippet , i use object fit with width , Do let me know if that prints well, you can set its width to 100% or in px what ever you want

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

<script src="cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="stackpath.bootstrapcdn/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><script src="stackpath.bootstrapcdn/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="i.stack.imgur/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</td> </tr> </table>