html - 图像错误地扩展以填充表格单元格的宽度，但仅在某些情况下

Question

我有一些 HTML，如果它本身在浏览器窗口中呈现就很好。但是，如果我尝试使用一些 Javascript 魔法将它放在另一个页面内嵌入的“灯箱”中，它会错误地呈现:我在表格单元格内的图像最终会水平(但不是垂直)扩展以填充它们的表格单元格，尽管事实上，我已经在 IMG 标签中指定了正确的宽度和高度。该行为在浏览器中非常一致，所以我假设这是某种“正确”的行为，并且必须有某种方法来防止它并保持图像以其自然大小显示，而不管包含的 HTML。

有问题的 HTML 本身很简单...基本上是这样的:

<table style='border-collapse:collapse;margin-bottom:10px;margin-left:20px'>

  <tr style=''>
    <td style='text-align:right;'>
      <a href='/master_page/distance_biked_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image1.jpg' width='50' height='35'/></a>
    </td> 
    <td style='height:50px;padding-left:10px'> 
      <a href="/master_page/distance_biked_page?simple=1">distance biked page</a> 
    </td> 
  </tr>

  <tr style=''> 
    <td style='text-align:right;'> 
      <a href='/master_page/timetracker_9_page?simple=1'><img style='border:1px solid #B9B9B9;' src='/user_image/image2.jpg' width='42' height='50'/></a> 
    </td> 
    <td style='height:50px;padding-left:10px'> 
      <a href="/master_page/timetracker_9_page?simple=1">time-tracker #9 page</a> 
    </td> 
  </tr> 

</table>

(请注意，当此 HTML 在有问题的“灯箱”上下文中呈现时，较窄的图像会水平扩展以填充其单元格，而较短的图像不会垂直扩展以填充其单元格。)

我不是 HTML 或 CSS 专家，对这种行为感到非常困惑。任何想法可能是什么原因造成的，或者我该如何阻止它？

Answer 1

检查您的 CSS 是否覆盖了宽度和高度的样式，例如:

table img {}
table a {}
tr img {}
tr a {}
td img {}
td {}
a img {}
a {}

您在某处为父元素设置了覆盖高度和宽度。父元素 CSS 可以覆盖 HTML 中设置的图像宽度和高度，但如果这样设置则不能:

<img src="x.gif" style="width: 50px;"/>

这是您的解决方案。