表格中的右图未调整大小

Posted 2023-03-05

【中文标题】表格中的右图未调整大小

【英文标题】：Right image in table not resizing

【发布时间】：2014-06-15 13:26:15

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

从 not 开始使用表格进行布局，而不是为此...

是的，我知道。但我是响应式设计的新手，这对我来说是唯一可行的解​​决方案。也是为什么我添加了最后一句话。我可以用 div 做到这一点，但问题是让文本调整大小，图像上的图标也将是一种字体。

我不认为 table 是唯一的解决方案......响应者可能会在这里给你正确的答案，但从长远来看，我建议你看看 bootstrap 是如何做到的;它是使用最广泛的 CSS 框架之一...

请不要使用表格！

【参考方案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;

希望对你有帮助:)

【参考方案2】：

DEMO

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

CSS

#container td 
    width: 24%;

【讨论】：

在您的示例中，外部两个单元格现在更小（图像也是），因为外部图像比内部图像宽几个像素。不过，这仍然是一个更好的解决方案，可以通过一些调整来使用。

以及图像的尺寸不同，您需要使用 TD 和图像宽度。我尝试使用内联 CSS 如下 - jsfiddle.net/hF5qY/4 但如果您保持所有图像的尺寸相同，它更适合

【参考方案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"   /></a>
                </div>
                <div id="cont2" class="cont">
               <a href="samen-veilig.html"><img src="http://i.imgur.com/IgpVrBz.jpg"   /></a>

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

                </div>
                <div id="cont4" class="cont">
                <a href="communiceren.html"><img src="http://i.imgur.com/KxVqQVu.jpg"   /></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希望它有所帮助

【讨论】：

本例中图片被拉伸，包含的div高度必须随图片调整大小。

【参考方案4】：

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

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

希望对你有帮助

【讨论】：

抱歉，您的示例的第一个图像比其他三个小，在最新的 Firefox 上测试。

图片大小不一样。第一个是 290x214，第二个是 283x214。他们都必须是相同的大小，你会得到想要的效果

好的，我明白你的意思，你是对的。最后一个更大，因为它的父 div 有 padding-right:0 这使它比其他 3.as 里面的 img 有一个 width:100% 更大（和更高）。