TH元素不适合新的图像大小

Question

我有一个包含在元素中的图像。我使用css将图像缩放到25%。然而，现在元素宽度没有改变。我们将不胜感激。我想要元素的宽度，以匹配图像的宽度。如果css无法做到这一点，我可以直接使用JavaScript。感谢

html

form {
padding-left: 10px
}
h1 {
font-size: 50px;
text-align: center
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
body {
background-color: #CDCDCD
}
.imageContain {
display: inline-block;
}
th {
border: 1px solid #000000;
display: inline-block
}

<h1>Data Calculator (Mean, Median, Mode, Range, and Average)</h1>
<table align="center">
<th>
<div>
<label>Put numbers here. Separated by a space</label><br>
<input id="input" />
<br>
<select id="selection">
<option value="mean">Mean</option>
<option value="median">Median</option>
<option value="mode">Mode</option>
<option value="range">Range</option>
<option value="average">Average</option>
</select>
<br>
<br>
<button id="output" onclick="submit()">Output</button><br>
<label id="result"><label>
</div>
</th>
<th>
<img src="https://i.imgur.com/dHhcc5a_d.webp?maxwidth=760&fidelity=grand" style="max-width:25%">
</th>
</table>

Answer 1

body {
background-color: #CDCDCD
}form {
padding-left: 10px
}
h1 {
font-size: 50px;
text-align: center
}
th {
border: 1px solid #000000;
display: inline-block
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.box{
width: 20rem;
height: 22rem;
}
label{
font-size: 27px;
font-weight: bold;
padding-top: 30px!important;
}
input{
margin-top: 80px;
font-size: 18px;
padding: 5px 10px ;
outline: none;
border: 1px solid black;
}
select{
margin-top: 20px;
font-size: 18px;
padding: 5px 10px;
outline: none;
border: 1px solid black;
}
button{
font-size: 18px;
padding: 5px 10px;
outline: none;
border: 1px solid black;
}
.img-th{
border: none;
}
th img{
width: 50%;
height: 50%;
border-radius: 50px;
border:none;
}

<h1>Data Calculator (Mean, Median, Mode, Range, and Average)</h1>
<table align="center">
<th>
<div class="box">
<label>Put numbers here. Separated by a space</label><br>
<input id="input" />
<br>
<select id="selection">
<option value="mean">Mean</option>
<option value="median">Median</option>
<option value="mode">Mode</option>
<option value="range">Range</option>
<option value="average">Average</option>
</select>
<br>
<br>
<button id="output" onclick="submit()">Output</button><br>
<label id="result"><label>
</div>
</th>
<th class="img-th"><img src="https://i.imgur.com/dHhcc5a_d.webp?maxwidth=760&fidelity=grand"></th>
</table>

这是你的答案吗？