Question

我在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>

Answer 1

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

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

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

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

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

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

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

1 个答案: