Question

我有一张表，其中第一列包含图像但图像太大。所以我在图像上添加了最大宽度：35％以缩小图像。

这可以工作，但是图像所在的单元格的宽度在缩放之前设置为图像的宽度，所以我在第一列中留下了这个额外的空格。

任何帮助将不胜感激！

请参阅此示例：plnkr.co/edit/McWSdj8HZgspS4E1NNqe?p=preview

Answer 1

我已经通过将单元格的宽度和内部图像设置为100％来解决它：

<td style="width: 15%">
    <img src="img.jpg" style="max-width: 100%; height: auto;">
</td>

Answer 2

您需要在表格上添加最大宽度，并删除容器单元格上的任何宽度属性。

示例：

    <table style="max-width: 100%">
      <tr>
        <td>
          <img src="http://www.picgifs.com/clip-art/cartoons/gnome-plop/clip-art-gnome-plop-578271.jpg" alt="PLOP" style="max-width: 100%">
        </td>
        <td>
          POUET POUET POUET
        </td>
      </tr>
    </table>

Answer 3

我会使用css文件添加图像：

<强> HTML

<table style="width: 100%">
    <tr>
        <td class="myImage">
        </td>
        <td>
            POUET POUET POUET
        </td>
    </tr>
</table>

<强> CSS

.myImage {
  background-image: url("http://www.picgifs.com/clip-art/cartoons/gnome-plop/clip-art-gnome-plop-578271.jpg");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100px;
  width: 100px;

}

这是我的JSFiddle：http://jsfiddle.net/abrouwer/dxbrgdd8/

表格单元格大小未缩放到图像

3 个答案: