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

【问题标题】：How to create a horizontal scroll bar to view the rest of my image?如何创建水平滚动条来查看我的图像的其余部分？
【发布时间】：2021-07-30 21:35:04
【问题描述】：

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

这是我的图像的代码，问题是图像对于页面来说太大并且被剪切了。我想要一个水平滚动条。我想知道制作水平滚动条的代码是什么，这样我就可以看到图像的其余部分。我不想调整图像大小，只是为了能够水平滚动。我知道一个奇怪的想法。任何帮助表示赞赏。

【问题讨论】：

标签： php html css web

【解决方案1】：

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

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 设置图像的高度和宽度

【讨论】：