html - 表格中的右图未调整大小

Question

我有一个包含 7 个单元格的表格，其中 4 个包含图像，3 个用作间距。图像单元格没有宽度，但间距单元格有。

|image| |image| |image| |image|

容器有最小和最大宽度，表格宽度为 100%，我希望图像随表格单元格调整大小，以便间距单元格保持不变，但图像同样调整大小以适合单元格。我正在创建一个部分响应式网站，其最小宽度为 960 像素，最大宽度为 1070 像素，这就是图像需要调整大小的原因。

问题是:表格中的最后一张图片在 IE 和 Firefox 中没有调整大小。它在 Chrome 中运行良好。

这是我的代码:http://jsfiddle.net/hF5qY/

有人有想法或更好的方法来使用 div 吗？

Answer 1

我会给你一些在选择响应式设计时可能有用的提示。

在这种情况下，您可以将图像包裹在 li 内，将 li 设置为 23-24% 左右。然后，您将 img 的宽度和高度保留为 100%:auto。剩余的 % 将用于您提到的“间距单元格”。

尝试这样的事情:

ul {
    max-width:1070px;
    max-width:960px;
}

li {
   width:23%;
   margin-right:2.66%

}
li:last-child {
   margin-right:0;

}
img {
   width:100%;
   height:auto;
}

希望对您有所帮助:)