CODEWITHSUNDEEP
cssslideshowhtml
Truncatus
Truncatus

Reputation: 5

How to set width and height of slideshow dynamically

I have set up a web page using an image in a div called slideshow. The div is supposed to be a max-width of 1600px and a max-height of 600px (width and height of the original jpg used here) and to shrink down dynamically when the screen is smaller or resized.

This works fine because the behavior of the image is set by CSS as follows :

.slideshow img{
    margin:0 auto;
    width: 100%;
    max-width: 1600px;
    min-width: 900px;
}

Now I would like to achieve the same effect by replacing the image with the Camera Slideshow from Pixedelic. But here I can't control the image with .slideshow img{} since the script uses a div instead of the image tag.

Width and height of the camera slideshow are controlled by a jQuery function. I have put the slideshow in a .slides div which I try to control by CSS, like this :

.slideshow .slides{
    display: block;
    margin:0 auto;
    max-width: 1600px;
    max-height: 600px;
    overflow:visible;
}

(Overflow is left visible to see what happens)

When I assign a height value (ie 600px) in the function, the slideshow loads at it's max height but doesn't shrink when the page is resized down : http://www.centredelafontaine.be/testpage1.html

When I leave height and width values blank in the function, the slideshow shrinks on resize but opens with a height of 800px (?) and crops the even greater image inside, overflowing the div placed below : http://www.centredelafontaine.be/testpage2.html

Can anyone help me on this issue ?

Upvotes: 0

Views: 24485

Answers (3)

Asuna
Asuna

Reputation: 1

You can set the portrait property to true and the images will not be cropped.

jQuery('#your-camera-gallery').camera({   
        portrait: true,
});

Upvotes: 0

Muhammad Bilal
Muhammad Bilal

Reputation: 3018

Set only image min height. Slidehow container will depend on image height. Means no need to set slidehow container height.

Upvotes: 0

user7959210
user7959210

Reputation:

Place a img tag inside the div which is contained by the slideshow and you will be able to modify those image (slideshow elements) proprieties through the CSS code.

<div id="image" div class="Slides w3-display-container">
    <img src="your_image.png" height="600" width="1600">
    </div>

If you can't work it out leave me a reply and I'll make a demo html

Upvotes: 0

Related Questions