TH 元素不适合新的图像尺寸答案

【问题标题】：TH element not fitting new image sizeTH 元素不适合新的图像尺寸
【发布时间】：2021-03-21 10:26:22
【问题描述】：

我有一个包含在元素中的图像。我使用 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>

【问题讨论】：

什么的 25%？这就是宽度所指的。
不就是原来宽度的25%吗？
通常不是，它表示父级的百分比。
你为什么要使用这个？（或 2 个？）您的内容不包含标题。使用表格行 (tr) 并使用单元格 (tds) 而不是 div 和第二个 th。此外，您的标签未正确关闭，缺少右斜杠

标签： html css image size scale

【解决方案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?

【讨论】：