| Riedi2008 |
25.03.2013 22:06 |
Realtive Bildhöhe und -breite einer jQuery Slideshow
Hallo Leute,
ich bräuchte mal bitte eure Hilfe, da ich absolut keine Idee mehr habe, wie ich mein Problem lösen kann. Ich habe eine jQuery-Slideshow mit zur Zeit festen Bildgrößen.
Ich möchte jedoch die Größe der Bilder in Prozentwerten angeben, jedoch fliegt mir dann das komplette Layout um die Ohren.
Übersicht halber habe ich mein Problem auf folgende Zeilen gekürzt:
HTML-Code:
<html>
<head>
<script src="lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui-1.10.2.min.js" type="text/javascript"></script>
<style>
#slideshow {
background: red;
position: relative;
width: 300px;
}
.slide {
position: absolute;
top:0;left:0;right:0;bottom:0;
}
.slide img {
float: left;
width: 100px;
height: 100px;
}
.clear {
clear: both;
}
</style>
<script>
$(document).ready(function() {
$('#slideshow').height($('img').outerHeight());
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(3000)
.next()
.fadeIn(3000)
.end()
.appendTo('#slideShow');
}, 5000);
});
</script>
</head>
<body>
<div id="slideshow">
<div class="slide">
<img src="">
<h2>Slide 1</h2>
<p>Beschreibung</p>
<div class="clear"></div>
</div>
<div class="slide">
<img src="">
<h2>Slide 2</h2>
<p>Beschreibung</p>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Änder ich nun die Höhe und Breite der Bilder wie folgt, passt sich die Höhe des Containers #slideshow und die Bilder werden nicht mehr angezeigt. Ich verstehe allerdings nicht ganz warum. Ich kann auch nicht nachvollziehen von welchen Angaben die 10% genommen werden, aber wahrscheinlich liegt darin auch das Problem.
Code:
.slide img {
float: left;
width: 10%;
height: 10%;
}
Ich hoffe ihr könnt mir weiterhelfen und sagen, wie ich irgendwie eine relative Bildergröße realisieren kann.
Viele Grüße
Riedi |
