如何在 HTML 表格中调整原始图像的大小？答案

【问题标题】：How do I resize an original image in an HTML table?如何在 HTML 表格中调整原始图像的大小？
【发布时间】：2011-01-11 23:03:28
【问题描述】：

我在 HTML 中创建了一个 4 行 16 列的表格，我在一个单元格中插入了一个图像，在另一个单元格中插入了文本，直到我拥有所有的行和列。请参阅下面的代码。我的问题在于图像：图像尺寸太大。我不知道如何使它达到缩略图的大小。此外，文字也不在图像旁边。注意：图片在左边，文字在图片右边。任何帮助将不胜感激。

<html>
<head>
<title> Cameron Cookies </title>
</head>


<body>
<table cellspacing="0" cellpadding="0">
    <tr>
        <td><img src="j0175514.jpg" alt="Chocolate cookies"></img></td>
        <td>Chocolate</td>
        <td><img src="j0408843.jpg" alt="Chocolate Nut cookies"></img></td>
        <td>Chocolate Nut</td>
    </tr>
    <tr>
        <td><img src="j0428480.jpg" alt="Macadamia Nut cookies"></img></td>
        <td>Macadamia Nut</td>
        <td><img src="j0182695.jpg" alt="Oatmeal Raisin cookies"</img></td>
        <td>Oatmeal Raisin</td>
    </tr>
    <tr>
        <td><img src="j0428480.jpg" alt="M & M cookies"</img></td>
        <td>M & M's</td>
        <td><img src="j0440992.jpg" alt="White Chocolate cookies"</td>
        <td>White Chocolate</td>
    </tr>
    <tr>
        <td><img src="j0387871.jpg" alt="Chocolate Pecan cookies"</img></td>
        <td>Chocolate Pecan</td>
        <td><img src="j0425515.jpg" alt="Chocolate Hazelnut cookies"</img></td>
        <td>Chocolate Hazelnut</td>
    </tr>
</table>
</br>Cookies are a great gift idea that everybody loves. Just give us a call or send us an e-mail 24 hours in advance and we'll create
a lovely gift bag or basket filled with an assortment of fresh, homemade cookies.
Thanks for visiting our website and be sure to come visit us in person here in Portland, Maine.
To place an order, click here. </p>
</body>

</html>

【问题讨论】：

注意<img> 标签的正确形式：<img src="j0387871.jpg" alt="Chocolate Pecan cookies"> 用于 HTML，<img src="j0387871.jpg" alt="Chocolate Pecan cookies" /> 用于 XHTML。
那里还有更多错误。 Ashley，你真的应该考虑使用官方 W3C 标记验证器检查你的标记是否有错误validator.w3.org
另一个例子：M & M 应该是M&nbsp;&amp;&nbsp;M:
@Sinan - 感谢您的提示。 @RegDwight - 感谢您的提示。

标签： html image html-table resize cell

【解决方案1】：

大多数浏览器会自动将图像大小调整为<img> tag 的width 和height 属性中指定的尺寸：

指定时，宽度和高度属性会告诉用户代理覆盖自然图像或对象大小以支持这些值。

当对象是图像时，它会被缩放。用户代理应尽力缩放对象或图像以匹配作者指定的宽度和高度。 Visual presentation of images, objects, and applets

但是，正确的做法是将原始图像调整为所需的尺寸。

因此，如果您需要 160 x 120 图像，而您有 1600 x 1200 图像，请继续创建调整大小的图像并在源中引用它。

这样做将有助于加快页面加载速度，因为图像文件现在将比原始文件小很多。

【讨论】：

@Sinan Unur -感谢您的帮助。我最终在 Photoshop CS3 中调整了它的大小，并在我的 HTML 标签中引用了新缩小的图像，并且效果很好。所以谢谢！