在網(wǎng)站的設(shè)計(jì)過(guò)程中，經(jīng)常會(huì)使用表格展示數(shù)據(jù)或排版。而在表格中插入圖片，則需要考慮圖片大小是否能夠自動(dòng)適配表格大小。

CSS是實(shí)現(xiàn)這一功能的好幫手，通過(guò)對(duì)表格和圖片的CSS樣式設(shè)置，可以實(shí)現(xiàn)圖片自動(dòng)適配表格大小的效果。

<table>
<tr>
<td><img src="example.jpg" alt="example"></td>
<td>例子文字</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 10px;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
height: auto;
}
</style>

在上面的代碼中，設(shè)置了table元素的寬度為100%，以使其充滿整個(gè)容器。td元素的樣式設(shè)置了水平和垂直居中，并設(shè)置了10px的間距。

圖片的樣式設(shè)置了最大寬度為100%，以使其不會(huì)超出td元素的寬度。設(shè)置圖片的高度為自動(dòng)，以使其與寬度成比例，自適應(yīng)表格大小。

如此簡(jiǎn)單的CSS樣式設(shè)置，便可實(shí)現(xiàn)圖片自動(dòng)適配表格大小的效果，讓頁(yè)面更加美觀。