TH element not fitting new image size - html

Question

I have an image contained inside a element. I scaled the image to 25% using css. Now, however, the element width didn't change. Help would be appreciated. I want the elemnent's width, to match the width of the image. If this isn't possible with css, I can just use JavaScript. Thanks
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>
Is this your answer?