Can't display image properly

[bansal89]

Hi,

I downloaded 10 images from the website and put all these images in slider. I am using this slider in my website. Unable to see the complete image. Width of these image is showing very large, as images are showing in center and it cuts from left and right side.

I just want to know, how to set the image height and width??

you can see the sample website : http://www.tcs.talentcare.co.in

[ghostrydr]

Try this:

Add a wrapper around the #slides container (constrained-container in this case)

<div class="constrained-container">
    <div id="slides">
        <div class="slides-container">
            <img src="images/s.jpg"  width="1024" alt="Talent Care Services" />
            <img src="images/s2.jpg"  width="1024" alt="Talent Care Services" />
            <img src="images/s3.jpg" width="1024" alt="Talent Care Services" />
            ...
        </div>
    </div>
</div>

Then restrict the size of that div:

.constrained-container {
    max-width: 1024px;
    height: 500px;
    margin: 0 auto;
}

And then tell superslides to use the size of that element

$(function() {
    $('#slides').superslides({
        inherit_width_from: '.constrained-container',
        inherit_height_from: '.constrained-container'
    });
});

And lastly here's a jsfiddle to see it in action http://jsfiddle.net/2o0hoa2n/

[bansal89]

Thanks for replying.....!!

But it is not working. It only reduces the size of div container. I think, there is some changes have to be done in script file. Please have a look once again.

Wating for your positive reply............!!

[ghostrydr]

Are you wanting all the images to display at their actual size?

[bansal89]

Not like that, I actually want that what images we use in this slider, that image will show clearly and properly.

Right now, you can the demo website, in this unable to see the images properly and clearly.

According to your given codes, It works only to reduce the width of container of div, it won't impact on image size.

demo link : http://www.tcs.talentcare.co.in

[ghostrydr]

I think the issue you're actually having has nothing to do with the plugin itself but with the images you're using. The plugin scales the images up (or down if told to like the example above) to the the container. The container in this case fills the window. The images are shorter than the window therefor they are scaled up to fill the space thus causing the images to not display properly.

You'll either need to:

• Add a preserve class to all your images and they won't be scaled.
• Source out higher res images that can stand to be scaled up a little
• Use a different plugin that suits your needs (ie one that scales to the images)

IMO based on the images you're using I would suggest a different plugin.