Question

所以在html.erb文档中我有一个表格，在那个表格中是一个缩放到列大小的图像，如下所示：

   <table width="900" border="0" align="center" valign="top">
      <tr>
        <td><img src="someimage.gif" width="35%" height="95%" /></td>
        <td>a whole bunch more html content here</td>
      </tr>
     </table>

它在Chrome中工作正常，但出于某种原因，当我在IE或Fire Fox中加载页面时，它会以原始大小显示图像，而不是按照应该的大小缩放到列的大小。我尝试删除高度和重量属性，而不是像这样替换它们：

    <img src="someimage.gif" style="height:95%;width:35%"/>

但我又遇到了同样的问题。在Chrome中工作正常，但在其他两个工作中没有。有没有人知道可能导致兼容性问题的原因以及我可以做些什么来修复或解决它？

编辑：我可能应该提到我尝试使用绝对和相对作为位置的参数在外部CSS文件中定义图像的大小，然后是大小的像素值，然后在删除CSS之后代码，在HTML5 img标签的高度和宽度部分。在这两种情况下，放大任何浏览器搞砸了网站的整体外观，这就是我切换到使用百分比值的原因。

Answer 1

在确定其内容的（宽度）之前，浏览器无法确定列的宽度。在您的情况下，内容的宽度取决于列的宽度。根据浏览器的不同，您将获得意想不到的结果，具体取决于图像是否存在于缓存中。

指定列的宽度和高度，您将获得预期的一致结果。 See demo here

Answer 2

对于Firefox，您可以尝试css背景大小，例如

<td>
    <div style="background: url(someimage.gif); background-size: 100% 100%; width: 35%; height: 95%;">
    </div>
</td>

或者您可以尝试jQuery，但您的HTML必须看起来像这样

 <table width="900" border="0" align="center" valign="top">
  <tr  class="image_tr">
    <td  class="image_td"><img class="image" src="someimage.gif"/></td>
    <td>a whole bunch more html content here</td>
  </tr>
 </table>

现在这里是jQuery

$(document).ready(function(){ 
    var height_percent = $("table .image_tr").height() / 100;
    var width_percent = $("table .image_td").width() / 100;

    $(".image").height(height_percent * 95);
    $(".image").width(width_percent * 35)
});

Answer 3

你应该尝试在表格中定义td的宽度，我发现它们经常搞乱在Internet Explorer中：）

Answer 4

所有浏览器都会缩放图像，但结果会有所不同，因为单元格大小会有所不同。如果您将border="0"更改为border="1"，则可以看到此消息。不同的浏览器对表应用不同的列宽分配算法，尤其是在这样的棘手情况下。您要求将图像缩放到可用宽度的35％，基本上是单元格宽度，而单元格宽度又取决于单元格的内容等。类似的考虑适用于身高。

要解决此问题，您需要以不依赖于特定浏览器的特定表格格式算法的术语指定所需的外观。

图像在chrome中正确显示，但在Firefox或IE中没有显示

4 个答案: