如何创建水平滚动条来查看图像的其余部分？

Question

<img src="the fake.png" width="3268" height="538" class="table" alt=""/>

这是我的图片的代码，问题是图片对页面来说太大了，而且被剪掉了。我想要一个水平滚动条。我想知道做一个水平滚动条的代码是什么，这样我就可以看到图像的其余部分。我不想调整图像的大小，只是为了能够水平滚动。我知道一个奇怪的想法。如有任何帮助，我们将不胜感激。

Answer 1

可以这样做的一种方法是将图像放在给定尺寸的div中，然后将div上的overflow属性设置为滚动。它看起来像这样：

HTML：

<div class="img-container">
  <img src="the fake.png" width="3268" height="538" class="table" alt=""/>
</div>

CSS：

.img-container{
width: 500px; /*width of the container the image is in, your choice*/
height: auto; /*means the height of the container is the same as the image so you are not scrolling vertically*/
overflow-x: scroll; /*this is the important line that tells the browser to scroll content outside the div*/
}

希望这能有所帮助。另外，我建议使用CSS而不是HTML来设置图像的高度和宽度