如何调整 HTML 表格中原始图像的大小？
我用 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>
I created a table with 4 rows and 16 columns in HTML and I inserted an image in one cell and text in another until I had all my rows and columns. See my code below. My problem lies with the image: the image size is too big. I don't know how to get it to about the size of a thumbnail. Also the text isn't sitting right next to the image. Note: the image is on the left and the text is on the right side of the image. Any help would be greatly appreciated.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
大多数浏览器会自动将图像大小调整为
![]()
，正确的方法是将原始图像调整为所需的尺寸。
因此，如果您需要
160 x 120图像，而您拥有1600 x 1200图像，请继续创建调整大小的图像并在源中引用该图像。这样做将有助于更快地加载页面，因为图像文件现在将比原始文件小得多。
Most browsers will automatically resize an image to the dimensions specified in the
widthandheightattributes of the<img>tag:However, the right way to do this is to resize the original images to the desired dimensions.
So, if you need a
160 x 120image and instead you have a1600 x 1200image, go ahead and create the resized image and reference that in the source.Doing so will help the page load faster because the image file will now be much smaller than the original.