如果页面缩放，图像会超出父级 div

Answer 1

.tab-vertical {
  border: 1px solid black;
  display: flex; 
  align-items: flex-start; /* Align items at the top */
}

.tab-vertical .nav-tabs {
  flex-direction: column; /* Arrange tabs vertically */
}

.tab-icon {
  display: flex; 
  align-items: center; 
}

.tab-icon img {
  width: 23px;
  height: 20px;
  margin: 2px 0px 3px 3px;
}

<div class="tab-vertical">
  <ul class="nav nav-tabs" id="myTab3" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="vertical-tab" data-toggle="tab" href="#tab-content" role="tab" aria-controls="Notes" aria-selected="true">
        <div class="tab-icon">
          <img src="https://w7.pngwing.com/pngs/512/200/png-transparent-iphone-4s-desktop-baby-blocks-android-abc-game-photography-toy-block.png" alt="Notes">
        </div>
      </a>
    </li>
  </ul>
  <div class="tab-content" id="tab-content">
    <!-- Tab content goes here -->
  </div>
</div>