Question

我正在尝试按百分比缩小图像，这在Firefox中正确呈现，但在Internet Explorer中无法呈现。 img标签需要在表格内。

<TABLE>
 <TR>
  <TD>
   <img src="test.gif" width="60%" height="60%">
  </TD>
 </TR>
</TABLE>

是否有更好的方法可以在两种浏览器中都有效？

Answer 1

尝试在CSS中定义尺寸：

<style type="text/css">
    .myImg{
        width:60%;
        height:60%;
    }
</style>

<table>
 <tr>
  <td>
   <img src="test.gif" class="myImg" />
  </td>
 </tr>
</table>

我不认为某些浏览器喜欢将宽度/高度内联定义为除数字值之外的任何内容（即width="200"）;

无论如何，给它一个机会 - 祝你好运

Answer 2

查看http://www.joelonsoftware.com/上的来源 - 文章中的图片非常精细。使用FireBug帮助您找出可以实现所需缩放的CSS。

Answer 3

请尝试以下代码：

<html>
<head>
  <style>
  table.full-width-table{
    width:100%;
  }
  td.center-text-td{
    text-align: center;
  }
  img.sixty-percent{
    width:60%;
    height:60%;
    margin:0 auto;
  }
  </style>
</head>
<body>
  <table class="full-width-table">
  <tbody>
    <tr>
    <td class="center-text-td">
      <img src="test.gif" class="sixty-percent"/>
    </td>
    </tr>
  </tbody>
  </table>
</body>
</html>

使用父元素<table> </table>以百分比定义宽度和高度时，图像不会呈现

3 个答案: