Image-based roundabout not scaling non-focused images

[JasOcher]

Howdy, I'm having a bit of an issue with the scaling of non-focused images. My roundabout is all images. The images are all the same height but Roundabout is not scaling down the ones that are not in focus, so it looks like one big image moving around. I was under the impression that Roundabout would scale down the ones that are not in focus. Is this not the case?

[JasOcher]

Here's a screenshot of what I'm talking about.

[mschel]

try assigning 100% sizes on your image-tag like:

style="max-width:100%; max-height:100%"

worked for me.

Or you choose the CSS way:

.roundabout-holder li img { max-width:100%; max-height:100%; margin:auto; display:block; }

[JasOcher]

Unfortunately that didn't work. I got it working using some other CSS tho. Thanks for the input!

[dipflan-zz]

Any chance you could post that CSS here to help us out who are having the same issue =)

[JasOcher]

You bet. I actually just snagged it from another example and modified it to fit my stuff. I'll add the HTML as well for some context.

<div id="roundAbout"> <ul> <li><img src="img1.jpg" alt="" /></li> <li><img src="img2.jpg" alt="" /></li> <li><img src="img3.jpg" alt="" /></li> <li><img src="img4.jpg" alt="" /></li> <li><img src="img5.jpg" alt="" /></li> </ul> </div>

#roundAbout ul { list-style: none; padding: 0; margin: 0; width: 43em; height: 30em; } #roundAbout li { height: 23em; width: 35em; text-align: center; cursor: pointer; } #roundAbout li img { width: 100%; }

[motorcycle-frenzy]

I got it to scale properly by changing the moveable item's sizes to percentages:

.roundabout-moveable-item { height: 100%; width: 100%; cursor: pointer; background-color: transparent; }