Trying to fit a slideshow width to fit screen
Question
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 (eg 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>
1 answers
solution1
1 2013-02-03 02:49:15
.slideshow > img {width: 100%;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.