-
☆ A M B ☆
- 24,524 Posts
Can you give a link to a page with such an oversized image?
www.intelligentss.com the images are within the scrolling box on the right hand side (Some images are fine but others are not)
-
☆ A M B ☆
- 24,524 Posts
-
☆ A M B ☆
- 24,524 Posts
This is what the javascript is doing when it creates the scrolling box:
<div id="logos" style="position: relative; overflow: hidden;">
<a href="http://www.csigrout.com/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 180px; height: 153px;">
<a href="http://www.quillfalcon.com/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 169px; height: 153px;">
<a href="http://www.nationalbc.co/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 180px; height: 153px;">
<a href="http://www.eurograffiti.com/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 180px; height: 153px;">
<a href="http://www.clean-like-new.com/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 180px; height: 153px;">
<a href="http://www.gumpak.co.uk/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 173px; height: 153px;">
<a href="http://www.nanolandglobal.com/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 193px; height: 153px;">
<a href="http://www.nanoyo.com/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 794px; height: 153px;">
<a href="http://www.esseurope.com/" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 11; opacity: 1; width: 177px; height: 153px;">
<img alt="ESS logo" src="assets/intelligentss.com/images/company/NASA.gif">
</a>
<a href="http://www.intelligentss.com/" style="position: absolute; top: -153px; left: 0px; display: none; z-index: 10; opacity: 1; width: 490px; height: 153px;">
</div>
As you can see, it's definitely resizing the images. So the problem is with the particular Javascript cycle plugin you are using.
Is it a major job to correct the plugin?
-
☆ A M B ☆
- 24,524 Posts
I have no idea. I'm not at all familiar with that particular JQuery plugin.
http://jquery.malsup.com/cycle/
I don't think it's the plugin - I noticed on line 79 of common.css you've set a height property for the images, but not a maximum width - so the nanoyo image is being stretched until it reaches 150px tall.
You need to configure your stylesheets.
Edit: I've used cycle extensively, it's a great plugin, no need to reconfigure that at all.
-
☆ A M B ☆
- 24,524 Posts
Yes, that'll be the problem. I did a bit of Google research, and it's highly recommended that the images be given height and width attributes in the img tags, or if possible be given standard height and width in the CSS file. In your case, using the CSS isn't a good idea, since your images vary so wildly in size.
