为什么我的图像无法以全尺寸加载？答案

【问题标题】：Why does my image not load on full size?为什么我的图像无法以全尺寸加载？
【发布时间】：2017-12-24 21:07:09
【问题描述】：

我需要制作一个基于表格的布局并将表格宽度设为 550 像素。然后我加载了一个原始宽度为 550 像素的图像，但在浏览器上我只有 449 像素。我想全宽。而且我在单元格之间还有额外的空间。

<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
            <tr style="margin:0; padding:0;">
                <td style="font-size:12px; line-height: 12px; width: 100%; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
            </tr>
            <tr>
                <td style="width:100%; height:10px;" cellspacing="0" cellpadding="0">
                    <img style="width: 100%;" src="border-top.png" />
                </td>
            </tr>
            <tr>
                <td style="width:50%; background-color:white;">
                    <img src="brugadalogo.png" />
                </td>
                <td style="width:50%; background-color:white; text-align: right;">
                    <img src="msdlogo.png" />
                </td>
            </tr>
        </table>

【问题讨论】：

“我需要做一个基于表格的布局” - 你真的吗？请不要。它会让你的生活更轻松，你会变得更富有、更富有、更有魅力，你永恒的灵魂也不会觉得被玷污了。只是说。
我明白你的意思 :P 但我没有时间争论它——那是我的规范

标签： html image html-table html4

【解决方案1】：

您的表格列不均匀。您有 3 行，前 2 行有 1 列，最后一行有 2 列。即使你有正确的百分比，最好让它均匀分布。例如让所有 3 行都有或“占用”2 列的空间。

我的意思是，您应该使用colspan，而不是使用宽度。还要从图像中删除宽度，如果你想要它的原始大小，它应该默认得到它。

<table style="width:550px;margin:0 auto;" cellspacing="0" cellpadding="0" border="0">
            <tr style="margin:0; padding:0;">
                <td **colspan="2"** style="font-size:12px; line-height: 12px; text-align: right; color:#5A99B1;">Click <b>here</b> for the online version</td>
            </tr>
            <tr>
                <td **colspan="2"** style="height:10px;" cellspacing="0" cellpadding="0">
                    <img src="border-top.png" />
                </td>
            </tr>
            <tr>
                <td style="background-color:white;">
                    <img src="brugadalogo.png" />
                </td>
                <td style="background-color:white; text-align: right;">
                    <img src="msdlogo.png" />
                </td>
            </tr>
        </table>

希望这能解决您的问题。

【讨论】：

它帮助并回答了我的问题。但是还有一个我没有提到的：我的border-top.png 有10px 的高度，但td 有20px。没有填充，没有边距，即使我将 10px 高度放在我的 td 上，我也无法弄清楚 - 正如您在我的示例中看到的那样。知道为什么吗？
嗯，这很奇怪。尝试使用 Firebug 的 Layout 选项卡检查 TD、TR 和 IMG，这应该会为您提供所有内容的确切尺寸，例如填充、边距、边框。也许有一种风格在某处被继承。您也可以尝试将高度设置为 TR 而不是 TD。
那是最奇怪的事情。 Firebug 的布局表示图像高度为 10 像素，没有填充、边框、轮廓、边距，没有任何内容，而 td 为 20 像素，强制设置了 10 像素的高度，但没有。我找到了一个解决方案并为 td 设置了 line-height:1px ，即使没有明确的解释它也能正常工作。