CODEWITHSUNDEEP
phphtmlcssweb
NOTERIC OK
NOTERIC OK

Reputation: 13

How to create a horizontal scroll bar to view the rest of my image?

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

this is the code to my image, the problem is the image is too big for the page and cuts out. I want a horizontal scrollbar. I want to know what the code is to make a horizontal scrollbar so I can see the rest of the image. I do not want to resize the image, just to be able to scroll horizontally. I know a weird idea. any help is appreciated.

Upvotes: 1

Views: 597

Answers (1)

Odoug4
Odoug4

Reputation: 80

A way you could probably go about doing this would be to place the image in a div with given dimensions and then setting the overflow property on the div to scroll. It would look something like this:

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*/
}

Hope this helps. Also, I recommend setting the height and width of the image using CSS rather than HTML

Upvotes: 1

Related Questions