Question

我想设置 td 标记的宽度和高度，其中包含标记。所以，我想做的是，无论图像大小如何，都应该根据 td 标签的宽度/高度来进行。

示例：

如果图片尺寸 200 * 100 且 td 标签的宽度和高度 100 * 50 。那么根据 td 标签的宽度和高度，它应该 100 * 50 。

＆＃13;

<tr>
  <td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="100" height="100"><img src="http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png" width="70" height="70" ></td>
</tr>

＆＃13;

我无法使用 position 属性。

Answer 1

试试这个。

display:block;
width:100%;
height:auto;

Answer 2

提供<img> width: 100%和height:auto

在框中输入一个数字，它会将<td>设置为该维度，<img>将符合。

段

＆＃13;

$('#in1').on('input', function() {
  var dim = $(this).val();
  $('#animate').height(dim).width(dim);
});

＆＃13;

img { width: 100%; height:auto}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>

  <tr>
    <td valign="top" align="center" id="animate" style="color: #FFFFFF;font-family: 'Montserrat', sans-serif; font-size:12px;font-weight:bold;line-height: 0px;letter-spacing:1px;text-align:center;text-transform:uppercase;" width="50" height="50">
      <img src='http://www.hubilo.com/eventApp/ws/images/event/logo/thumb/2712_1455295221.png'>
    </td>
  </tr>
</table>

<input id='in1'>

＆＃13;

如何设置包含图像的td标签的宽度/高度？

2 个答案:

段