Christoph: Bildgröße an Fenstergröße anpassen

Kann mir jemand sagen, wei ich ein Bild an die Fenstergröße anpassen kann?
Dass ein bild bei versch. Auflösungen (800x600, 1024x768 ect.) gleich groß ist. Geht das irgendwie?

Christoph

  1. Hallo,

    Kann mir jemand sagen, wei ich ein Bild an die Fenstergröße anpassen kann?

    Ja. Siehe ein paar Threads weiter unten: [pref:t=75552&m=435150]
    sowie tausendfach im </archiv/>

    Dass ein bild bei versch. Auflösungen (800x600, 1024x768 ect.) gleich groß ist.

    Es ist doch der Normalfall dass ein Bild gleich gross bleibt (in Pixeln gemessen,
    z.B. 500x375 Pixel gross). Dafuer musst Du gar nichts tun.
    Nur nimmt es dann auf einem groesseren Bildschirm relativ gesehen
    weniger Platz ein und wirkt somit unter Umstaenden "kleiner"...

    Gruesse,

    Thomas

    --
    Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
    Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
    Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/
  2. Hi,

    Dass ein bild bei versch. Auflösungen (800x600, 1024x768 ect.) gleich groß ist. Geht das irgendwie?

    Entweder Breite *oder* Höhe mittels CSS (width/height:100%), oder Breite *und* Höhe mittels JavaScript (Seite, wo Du Dich aber selbst durch den Code wurschteln mußt: http://www.monstropolis.org

    Gruß, Cybaer

    1. THX, mit dem css geht das super.

    2. Hallo,

      Entweder Breite *oder* Höhe mittels CSS (width/height:100%)

      In Mozilla 1.5 und Konqueror 3.11 kann man ein Vordergrund-Bild
      mit CSS auch in beiden Richtungen auf 100% strecken (verzerren):
      http://www.tiptom.ch/tests/mix/bild100.html
      Vollstaendiger Quelltext (valides HTML und CSS):

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
      <html>
         <head>
            <title>Bild auf 100% gestreckt</title>
            <meta http-equiv="Content-Type" content="text/html; ISO-8859-1">
            <style type="text/css">
             html, body, p, img { width:100%; height:100%; margin:0; border:0 none; padding:0; display:block; }
            </style>
         </head>
         <body>
           <p><img src="..." alt="..."></p>
         </body>
      </html>

      Ohne display:block gibt es bei Mozilla einen (fast ueberfluessigen)
      vertikalen Scrollbalken.

      Die Variante mit dem verlinkten Bild
      http://www.tiptom.ch/tests/mix/bild100a.html
      hat folgenden Quellcode:
      CSS:
      html, body, p, a, img { width:100%; height:100%; margin:0; border:0 none; padding:0; display:block; }
      HTML:
      <p><a href=".."><img src="..." alt="..."></a></p>

      display:block ist IMHO sicher notwendig, um aus A ein
      Block-Level-Element zu machen.
      (In Mozilla koennte man es auch weglassen und den
      Link trotzdem auf 100% Breite und Hoehe ausdehnen,
      aber in MS IE funktioniert das AFAIK nur, wenn man
      display:block hat.)

      Konqueror 3.1.1 hat bei beiden Beispielen IMHO einen Bug:
      Beim ersten Mal Laden zeigt er das Bild brav an.
      Nach einem Reload nicht mehr - weisses Fenster. ;-(
      Wenn man nach einem Reload die Groesse des Browserfensters
      aendert, zeigt er das Bild wieder an.

      Netscape 4.78 (Linux) zeigt das Bild in "normaler" Groesse
      oben links im Fenster an (Jaja, CSS ist aktiviert... ;-)

      Es kommt mir kein schlauer Anwendungsfall fuer diese Sache
      in den Sinn, denn die meisten Bilder wirken ja, wenn sie
      verzerrt werden, ziemlich haesslich. Aber weil die Frage, wie
      man ein Bild aufs ganze Browserfenster ausdehnen kann,
      hier immer wieder gestellt wird, nimmt mich die Loesbarkeit
      eben doch wunder...

      => Ich freue mich ueber Rueckmeldungen zu den beiden Testseiten,
      insbesondere dazu, wie sie in MS IE dargestellt werden.

      Freundliche Gruesse,

      Thomas

      --
      Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
      Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
      Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/
      1. Hi,

        In Mozilla 1.5 und Konqueror 3.11 kann man ein Vordergrund-Bild
        mit CSS auch in beiden Richtungen auf 100% strecken (verzerren):

        Aber wahlweise?

        D.h., das Bild hat *unverzerrt* volle Höhe *oder* Breite - also je nachdem, ob das Browserfenster "schmal oder flach" ist?

        Ich denke, weniger die "Bildschirmfüllung" ist wichtig, sondern eher, daß das Bild unverzerrt den größtmöglichen Platz einnimmt?! Halt unabhängig davon, ob der Surfer 16:9 oder 9:16 bevorzugt. ;-)

        => Ich freue mich ueber Rueckmeldungen zu den beiden Testseiten,
        insbesondere dazu, wie sie in MS IE dargestellt werden.

        Sollte ich 'ne Sekunde Zeit haben melde ich mich wieder! :-)

        Gruß, Cybaer

        1. Hallo,

          Ich denke, weniger die "Bildschirmfüllung" ist wichtig, sondern eher, daß das Bild unverzerrt den größtmöglichen Platz einnimmt?!

          Das ist die Frage! ;-)

          Manche Leute wollen genau das: dass ein Bild das Fenster komplett fuellt:
          http://www.tiptom.ch/tests/mix/bild100.html
          Andere wollen, dass es moeglichst breit dargestellt wird:
          http://www.tiptom.ch/tests/mix/bild100b.html
          Oder moeglichst hoch:
          http://www.tiptom.ch/tests/mix/bild100h.html

          Halt unabhängig davon, ob der Surfer 16:9 oder 9:16 bevorzugt. ;-)

          Das ist der Knackpunkt! ;-)

          Ich verstehe jetzt langsam _Deine_ Fragestellung so:
          "Wie kann ich das Bild - unter Wahrung der Proportionen - in einem
          unbekannt grossen Fenster moeglichst gross darstellen?"
          Und das ist ohne JavaScript auch IMHO nicht moeglich,
          weil es ja sowohl von den Proportionen/Dimensionen des Bildes
          als auch von denen des Fensters abhaengt, ob das Bild mit
          100% Breite oder 100% Hoehe dargestellt werden kann, ohne
          dass es in der anderen Dimension zu gross wird fuer das Fenster.

          Gruesse,

          Thomas

          --
          Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
          Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
          Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/