0

I have a website that I need to fit to different screen sizes. Most of that is quite straightforward, but I have a slideshow that need to resize with screen size AND have the image centered on the page. The images are wider than the page, so as to have no white spaces on either side as the size changes.

The full size picture is 4800px wide, but this changes with browser size.

If it was a question of centering image at one size only, I would use

#image{left:50%, margin-left:2400px;}

But since I resize the picture according to availabe space, so I can show the full height of the picture at all times, the width of the displayed image changes and that method of centering is no good.

So how can I use javascript to check the current image width and change the margin-left property, or could it be done in css?

EDIT to add a bit of the css here:

This bit nice resizes the images to fit height wise in the available space depending on the browser/screen size. But the centering is missing.

#slideshow{
max-height:100%;
width:auto;
background-color: blue;
overflow: hidden;
text-align: center;
z-index:5;}

.size-4{
max-height:100%;
width:auto;}
Henrik
  • 1
  • 1
  • I'd be tempted to suggest `img {max-width: 100%; margin: 0 auto;}` but I'm not convinced that would address the issues completely. – David Thomas Mar 10 '13 at 12:29
  • Wow... 4800px? That's really big.... Why don't you resize it and serve a smaller image? This is going to be a real heavy download. – Aurelio Mar 10 '13 at 12:32
  • @DavidThomas, sorry, didn't cut it ;-) Nobita, They are large, combined of three 1600px images, and I need that to showcase the products of the company. On large screens, I can show the whole of the center image, but on smaller screens, that would leave too much space on either side, thus I want the previous and the next picture of the slideshow to fill that space. File size will be addressed later. – Henrik Mar 10 '13 at 12:43
  • Found it! [link](http://stackoverflow.com/questions/6865128/how-to-center-an-image-that-is-wider-than-the-browser-window-not-a-background-i?rq=1) `code`
     – Henrik Mar 10 '13 at 23:54
  • And then again - doesn't work in IE or Opera!! – Henrik Mar 11 '13 at 00:10

1 Answers1

0

You can make a Table. [Space]-[Image]-[Space]

The spaces has to be <td width="50% height="100%"> The image `

This is how I handle it in my sites

Kelvin
  • 130
  • 3
  • 11