How can you create multiple image buttons and have them work on all monitor resolutions?

StackOverflow https://stackoverflow.com/questions/16182088

Question

Okay, so this is what I currently have for my webpage: j sfiddle(dot)net/gTF9y/4/

Which is just one single image, with css code that makes it so that one image adjusts to different monitor resolutions.

What I want to do is have the exact same look of the webpage right now, but have there be 12 individual images in the same position rather than 1 big image, so that I can make those images "buttons" essentially that can be clicked to go to a different webpages.

I want to retain the image-adjusting-to-different-monitor-resolutions functionality though.

Thanks a bunch!

Was it helpful?

Solution

you can create 3x3 grid of images using css.

http://jsfiddle.net/gTF9y/1/

.block { width:33.33333%; float:left; display:block; }
.block img {display:block; max-width:100%; width:100%; }

If you really want to warp the images when the page loads you can use jQuery to set the images to 1/3 the window height and width. Throw in a .resize() and it responds to changes in the browser after it's loaded.

http://jsfiddle.net/gTF9y/3/

OTHER TIPS

Here's an example of how I've divided a page into a 4x3 grid:

<html>
    <body>
        <div>1</div><div>2</div><div>3</div><div>4</div>
        <div>1</div><div>2</div><div>3</div><div>4</div>
        <div>1</div><div>2</div><div>3</div><div>4</div>
    </body>
</html>

html, body
{
    height: 99%;
    margin: 0;
}

div
{
    display: inline-block;
    height: 33%;
    width: 25%;
}

div img
{
    height: 100;
    width: 100%;
}

Producing this:

Now all you need to do is add <img src="something.png"> inside each <div></div>.

Here is a JSFiddle (edit) with all images added.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top