表格中的右图未调整大小

Question

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

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

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

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

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

任何人有想法或更好的方法来使用 div 做到这一点？

Answer 1

我将为您提供一些在选择响应式设计时可能有用的提示。

在这种情况下，您可以将图像包裹在 li's 中，将 li's 设置为 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;
}

希望对你有帮助:)

Answer 2

DEMO

TD 上的 % width 似乎可以解决您的问题

CSS

#container td {
    width: 24%;
}

Answer 3

好吧，我已经尝试过你想要的 DIVS 单独....除了跨度....它与 IE8 一起使用 ....

这是我的html

<div id="container">
            <div id="innercont">
                <div id="cont1" class="cont">
                    <a href="samen-doen.html"><img src="http://i.imgur.com/frRYKmV.jpg" alt="Samen doen" width="100%" height="100%"/></a>
                </div>
                <div id="cont2" class="cont">
               <a href="samen-veilig.html"><img src="http://i.imgur.com/IgpVrBz.jpg" alt="Samen veilig" width="100%" height="100%"/></a>

                </div>
                <div id="cont3" class="cont">
                <a href="samen-gezond.html"><img src="http://i.imgur.com/TdUU0zZ.jpg" alt="Samen gezond" width="100%" height="100%"/></a>

                </div>
                <div id="cont4" class="cont">
                <a href="communiceren.html"><img src="http://i.imgur.com/KxVqQVu.jpg" alt="Communiceren" width="100%" height="100%"/></a>

                </div>
            </div>
</div>

这是我的 css ....

    #container {
    max-width: 1050px;
    min-width: 640px;
}
#innercont{
    width: 100%;
    height: 30%;
    position: absolute;
    top: 0;
    left: 0;
}
.cont{
    width: 24%;
    height: 100%;
    margin-right: 5%;
    z-index: 10;
}
#cont1{
    position: absolute;
    top: 0;
    left: 0;
}
#cont2{
    position: absolute;
    top: 0;
    left: 25%;
}
#cont3{
    position: absolute;
    top: 0;
    left: 50%;
}
#cont4{
    position: absolute;
    top: 0;
    left: 75%;
}

这是一个小提琴Fiddle希望它有所帮助

Answer 4

这是我将如何使用 div 进行操作，这是我认为的最佳选择：http://jsfiddle.net/hF5qY/10/embedded/result/

不要介意#container 这个布局会适应网站的任何地方。确保您只有 4 个图像项，否则您需要调整 .cell 宽度。

希望对你有帮助