如何在滚动条上显示图像

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

#image-container {
  width: 100%;
  height: 200px; /* 设置容器的高度 */
  overflow-x: scroll; /* 水平滚动条 */
  white-space: nowrap; /* 防止图像换行 */
}

#image-container img {
  display: none; /* 隐藏图像本身 */
}

window.addEventListener('DOMContentLoaded', function() {
  var imageContainer = document.getElementById('image-container');
  var images = imageContainer.getElementsByTagName('img');
  
  var totalWidth = 0;
  for (var i = 0; i < images.length; i++) {
    totalWidth += images[i].width;
  }
  
  imageContainer.style.width = totalWidth + 'px';
});