Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 25.03.2013, 22:06
Riedi2008 Riedi2008 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.04.2008
Beiträge: 14
Riedi2008 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links