如何让按钮内图片适配Div容器：按高度自适应并保持宽高比

我需要让按钮#but1、#but2内的图片在父级Div容器中尽可能占满高度，同时宽度根据高度自动适配（width: auto）。尝试过以下CSS但未生效：

#but1 img, #but2 img{
    height: 100%;
    width: auto;
}

问题根源 #

1. 按钮本身未设置高度，无法让内部图片继承容器高度
2. 现有CSS中图片样式是width:100%; height:auto;，与需求的样式冲突
3. 容器未使用合适的布局，导致按钮无法自动填充容器高度

修正后的完整代码 #

CSS代码

#but1 {
  margin-left: auto;
  margin-right: 5px;
  background-color: transparent;
  border: 0;
  height: 100%; /* 让按钮占满容器高度 */
  padding: 0; /* 移除默认内边距，避免挤压图片 */
}

#but2 {
  margin-left: 5px;
  margin-right: auto;
  background-color: transparent;
  border: 0;
  height: 100%; /* 让按钮占满容器高度 */
  padding: 0; /* 移除默认内边距 */
}

#img1, #img2 {
  height: 100%;
  width: auto; /* 按高度自动适配宽度 */
  object-fit: contain; /* 可选：保证图片比例不变，完整显示 */
}

.button-container {
  background-color: #fff;
  width: 50%;
  height: 50px;
  border-radius: 125px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  display: flex; /* 使用flex布局，自动对齐内部元素 */
  align-items: center; /* 垂直居中元素 */
  overflow: hidden; /* 避免图片超出容器圆角范围 */
}

#but-cont-2 {
  margin-top: 25px;
  background-color: #79b2f7;
  position: relative;
}

#textarea {
  width: 85%;
  background-color: transparent;
  border: 0;
  height: 100%;
  outline: none;
  resize: none;
  padding: 0 10px; /* 添加内边距，避免文字贴边 */
  box-sizing: border-box; /* 确保内边距不超出容器宽度 */
}

.text {
  width: calc(100% - 60px); /* 预留按钮的显示空间 */
  background-color: transparent;
  border: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  right: 21px;
}

HTML代码

<div>
  <div class="button-container" id="but-cont-1">
    <textarea id="textarea" name="prod"></textarea>
    <button onclick="sub()" id="but1">
        <img id="img1" src="https://cdn-icons-png.flaticon.com/512/861/861180.png" alt="提交">
    </button>
  </div>

  <div class="button-container" id="but-cont-2">
    <label id="cont" class="text"></label>
    <button id="but2">
        <img id="img2" src="https://cdn-icons-png.flaticon.com/128/1078/1078599.png" alt="重置">
    </button>
  </div>
</div>

关键修改说明 #

• 给按钮添加height:100%和padding:0，让按钮完全填充容器高度，消除默认样式对图片的挤压
• 修正HTML中重复的ID问题（按钮与图片不能共用同一ID）
• 给容器添加display:flex和align-items:center，实现内部元素垂直对齐，同时让按钮自动适配容器高度
• 图片样式改为height:100%; width:auto，配合object-fit:contain保证图片比例不变且完整显示
• 给文本域添加box-sizing:border-box和内边距，优化文字显示体验

内容的提问来源于stack exchange，提问作者Tecnomagia