我尝试向表数据添加一个图像，但结果发现它非常小，占用了很多空间。我还需要只使用HTML来应对这个挑战。计算器的图像大小为400x300(高和宽(。
此处为我的outputer图像描述此处的预期输出图像描述
我的代码
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="calculator.jpg" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
使用CSS告诉系统你希望图像的大小，以及你希望所有图像都是可见的，无论它的纵横比与你能给它的空间大小相比如何。
例如，对于高度为400px、宽度为300px的空间：
<img src="calculator.jpg" style="height: 400px; width: 300px;object-fit: contain;">
我认为这个问题与您的图像有关，就像我在上面写代码一样。效果很好。https://codepen.io/ash_000001/pen/abVqXxq?editors=1000
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="https://media.istockphoto.com/vectors/mobile-phone-vibrating-or-ringing-flat-vector-icon-for-apps-and-vector-id1141778521?k=20&m=1141778521&s=612x612&w=0&h=HR00_7snTNcWcsXAFuzcVPTPnU--qT8R6H-ve4lG2m8=" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>