如何在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表格中調整原始圖像的大小？

回答

相關問題