如何使用html/css/jquery/bootstrap显示/隐藏图像，并且不留空格或不对齐？

<div id="image-container">
  <img src="image.jpg" alt="Image">
</div>

#image-container {
  display: none; /* 初始状态隐藏图像 */
  position: absolute; /* 绝对定位，不占据文档流 */
}

#image-container img {
  width: 100%; /* 图像宽度自适应容器 */
  height: auto; /* 图像高度自适应 */
}

$(document).ready(function() {
  $('#show-image-button').click(function() {
    $('#image-container').show(); /* 显示图像 */
  });

  $('#hide-image-button').click(function() {
    $('#image-container').hide(); /* 隐藏图像 */
  });
});

<button id="show-image-button" class="btn btn-primary">显示图像</button>
<button id="hide-image-button" class="btn btn-danger">隐藏图像</button>