How to adapt an image to a div

Question

I'm trying to adapt the images from the buttons (#but2, #but1) to their full height possible (in the div) and their corresponding width according to their height (width: auto).

I've tried with this code for the images from the buttons:

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

But I can't get the output I want. I share an image showing what's the output of that code and what's the output I want.

Thanks a lot for your help!

#but1 {
  margin-left: auto;
  margin-right: 5px;
  background-color: transparent;
  border: 0;
}

#but2 {
  margin-left: 5px;
  margin-right: auto;
  background-color: transparent;
  border: 0;
}

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

.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);
}

#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;
  float: left;
}

.text {
  width: 100%;
  background-color: transparent;
  float: right;
  border: 0;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  right: 21px;
}

<div>
  <div class="button-container" id="but-cont-1">
    <textarea id="textarea" name="prod"></textarea>
    <button onclick="sub()" id="but1">
        <img id="but1" 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="but2" src="https://cdn-icons-png.flaticon.com/128/1078/1078599.png" alt="">
    </button>
  </div>
</div>

Answer 1

Try using display: flex; for the button and try to resize the images with pixels like width: 20px; and height: auto; or verse versa, it should fix it.