CODEWITHSUNDEEP
javascripthtml
user2036368
user2036368

Reputation: 33

Trying to fit a slideshow width to fit screen

I'm trying to create a slideshow (of images) which I've done (by coping an example and changing it slightly, but I'm trying to fit the image size so that there is no option of scrolling. I tried putting it in a div, but this did not work (undoubtably due to my incompetence). I have looked up lots on here, and found several cases of people asking the same/similar questions (e.g How to resize an image to fit in the browser window?), however I have been unable to apply it. Currently when I view this, the page size is the size of the largest image (when the image is larger than the page.)

Many thanks for your help.

Here is where I'm currently at:

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Basic Demo</title>
<style type="text/css">
.slideshow { height: "100%"; width:auto }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>
</head>

<body>
<div class="slideshow"; style= height: "100%"; width:"auto">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
        <img src="5.jpg" />
</div>
</body>
</html>

Upvotes: 0

Views: 1402

Answers (1)

isherwood
isherwood

Reputation: 61056

http://jsfiddle.net/LsNV7/6

.slideshow > img {width: 100%;}

Upvotes: 1

Related Questions