Image doesn't render when width and height are defined in percentage with <table> parent element
I'm trying to scale down an image by percentage and this renders correc开发者_StackOverflowtly in Firefox, but not in Internet Explorer. The img tag needs to be inside a table.
<TABLE>
<TR>
<TD>
<img src="test.gif" width="60%" height="60%">
</TD>
</TR>
</TABLE>
Is there a better way to do this so it works in both browsers?
Try defining the dimensions in CSS instead:
<style type="text/css">
.myImg{
width:60%;
height:60%;
}
</style>
<table>
<tr>
<td>
<img src="test.gif" class="myImg" />
</td>
</tr>
</table>
I don't think some browsers like when you define width/height inline as anything but a numeric value (i.e., width="200");
Anyway, give that a shot - good luck
Check out the source on http://www.joelonsoftware.com/ - the images within articles scale quite nicely. Use FireBug to help you with figuring out the CSS that will accomplish the scaling you want.
Please try the following code:
<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>
加载中,请稍侯......
精彩评论