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

我在HTML中创建了一个有4行16列的表格，并且我在一个单元格中插入了一个图像，并在另一个单元格中插入了一个文本，直到我拥有了所有的行和列。看到我的代码如下。我的问题在于图像：图像尺寸太大。我不知道如何将它缩小到缩略图的大小。此外，文字并不坐在图像旁边。注意：图像位于图像的左侧，文本位于图像的右侧。任何帮助将不胜感激。如何在HTML表格中调整原始图像的大小？

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

来源

2010-02-01 Ashley

请注意“”标签的正确格式：HTML的“ Chocolate Pecan cookies ”和XHTML的“”。 – 2010-02-01 23:57:00

那里有更多的错误。 Ashley，你应该考虑使用官方W3C标记验证器在http://validator.w3.org/ – 2010-02-02 00:01:25

上检查你的标记是否有错误。另一个例子：'M＆M'应该是'M & M'： – 2010-02-02 00:56:06

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

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

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

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

所以，如果你需要一个160 x 120图像，而不是你有一个1600 x 1200图像，请继续创建调整大小的图像和参考源。

这样做会帮助页面加载速度更快，因为图像文件现在会比原始文件小多。

来源

2010-02-01 23:48:15

@Sinan Unur - 感谢您的帮助。我最终在Photoshop CS3中调整了大小，并在我的HTML 标记中引用了新缩小的图像，并且完美运行。那谢谢啦！ – Ashley 2010-02-02 20:58:17

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

回答

相关问题