html - 表格单元格中的图像未按比例缩小 : using ie8/7

Question

谁能帮我解决我的网站问题？

http://www.andrewstonyer.co.uk/test/

我的问题:

在 IE8/7 上，如果您单击缩略图(现在只有“Pulse”和“Time Within The Hour”已连接)，则会出现包含该作品细节的叠加层。

在 Gecko/Webkit 中应该发生的事情是，叠加层包含一个带有标题的表格、一个缩放的、居中的图像和一个导航菜单。有一个文本切换开关，它会向上推图像单元格并使图像变小，保持比例。我知道叠加层现在看起来很糟糕 - 这些只是占位符颜色 :)

在 IE 上，图像不能完全适合表格单元格，这意味着所有内容都被推到窗口之外。我看不到导航菜单。它似乎以实际像素大小渲染图像(在 CSS 中，img 类元素设置为 100% 高度)。

文本单元格是用 jquery 切换的，当在 IE 中打开时，它似乎没有“挤压”上面的单元格，这正是我想要发生的。

有专家可以帮忙吗？

问候，乔恩

Answer 1

将 width:100% 添加到 CSS 中的 ov-image 类可以修复此问题。我想其他浏览器支持 display:block 甚至图像缩放，但在 IE 上，您必须声明宽度才能缩放。

另外从同一个类中删除 height:100%。