Pomplito: Bildgrößen

Hallo,

ich verzweifle langsam ganz schön...

Folgendes funktioniert nicht (es wird kein Bild angezeigt)
<div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
<img src="bilder/bild1.gif" width="100%" height="100%">
</div>

Folgendes funktioniert zwar, aber es wird gleichmäßig skaliert und somit passt die Höhe nicht!
<div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
<img src="bilder/bild1.gif" width="100%">
</div>

Wie kann ich in dem div-Kontainer ein Bild so skalieren, dass es immer genau 100% der Breite und Höhe des Kontainer ausfüllt?

Schönen Gruß
Pomplito

  1. Hallo,

    Wie kann ich in dem div-Kontainer ein Bild so skalieren, dass es immer genau 100% der Breite und Höhe des Kontainer ausfüllt?

    gib dem bild selber die 100% width und height:

    <div>
    <img src="bild.gif" alt="bla" width="100% height="100%">
    </div>

    1. Hallo,

      Wie kann ich in dem div-Kontainer ein Bild so skalieren, dass es immer genau 100% der Breite und Höhe des Kontainer ausfüllt?

      gib dem bild selber die 100% width und height:

      <div>
      <img src="bild.gif" alt="bla" width="100% height="100%">
      </div>

      Wie ich oben schon geschrieben habe, funktioniert das nicht, sobald im <img>-Tag die height="100%"-Angabe vorkommt, wird kein Bild angezeigt!

      Vielleicht sollte ich noch erwähnen, dass der <div>-Tag in einem weiteren <div>-Tag liegt, der mit "relativ" positioniert ist!

      1. hi,

        Vielleicht sollte ich noch erwähnen, dass der <div>-Tag in einem weiteren <div>-Tag liegt, der mit "relativ" positioniert ist!

        das solltest du nur dann erwähnen, wenn es _ohne_ diesen umstand wie gewünscht funktioniert.

        tut es das?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hi,

          habe es gerade getestet und ja es funktioniert ohne.
          Hier mal der gesamte Quellcode!

          Folgendes funktioniert NICHT: (Die Bilder werden nicht angezeigt)
          <html>

          <body>

          <!-- (linke Seite) Navigation -->
          <div style="position:absolute;left:0px;top:0%;width:200px;height:100%;" scrolling="no">
          <img src="bilder/logo_klein.gif" border="0" alt="Logo" title="Logo">
          Text Nevigation
          </div>

          <!-- (rechte Seite) Inhalte -->
          <div style="position:relative; margin:0px 0px 0px 200px;">

          <div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
          <img src="bilder/2.gif" width="100%" height="100%">
          </div>
          <div style="position:absolute; left:25%; top:0%; width:75%; height:14%; overflow:hidden;">
          <img src="bilder/3.gif" width="100%" height="100%">
          </div>

          <div style="position:absolute;left:0%;top:0%;width:100%;height:100%;overflow:auto;">
          Text Inhalte
          </div>

          </div>

          </body>

          </html>

          Folgendes funktioniert: Bilder werden angezeigt! (Jedoch fehlt dann der Inhaltskontainer...)
          <html>

          <body>

          <div style="position:absolute; left:0%; top:0%; width:25%; height:100%; overflow:hidden;">
          <img src="bilder/2.gif" width="100%" height="100%">
          </div>
          <div style="position:absolute; left:25%; top:0%; width:75%; height:14%; overflow:hidden;">
          <img src="bilder/3.gif" width="100%" height="100%">
          </div>

          <div style="position:absolute;left:0%;top:0%;width:100%;height:100%;overflow:auto;">
          Text Inhalte
          </div>

          </body>

          </html>

      2. Hallo,

        Wie ich oben schon geschrieben habe, funktioniert das nicht, sobald im <img>-Tag die height="100%"-Angabe vorkommt, wird kein Bild angezeigt!

        Vielleicht sollte ich noch erwähnen, dass der <div>-Tag in einem weiteren <div>-Tag liegt, der mit "relativ" positioniert ist!

        Probier's mal mit:
        <img src="xy.gif" style="width: 100%; height: auto; border: none;" alt="bla" title="bla">

        Gruß Gunther

        1. Hallo,

          das geht leider auch nicht, vielleicht liegt es am äußeren <div>?

          siehe auch hier:  http://forum.de.selfhtml.org/?t=105135&m=649435

          Vielen Dank
          Pomplito

          1. Hallo,

            das geht leider auch nicht, vielleicht liegt es am äußeren <div>?

            du musst dem relativ positionierten Div auch noch ein height:100% mitgeben - also:

            <div style="height:100%; position:relative; margin:0px 0px 0px 200px;">

            dann klappt's auch mit den Bildern!

            Aber: Dein ganzes Konstrukt ist sehr wild und afaik führen absolut positionierte Blöcke in relativen immer zu Schwierigkeiten. Ich würde empfehlen, schau' dir (noch)mal einschlägige Seiten zu CSS Layouts an.

            Gruß Gunther