Bildanzeige mit HTM

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Bildanzeige mit HTM

      Ich hoffe dass ich mit dieser Frage im richtigen Forum bin.

      Wie kann ich in einem HTM die Größe der Anzeige eines Bildes von der im PC eingestellten Bildschirmauflösung abhängig machen?
      Das Bild sollte auf dem Schirm möglichst groß angezeigt werden ohne über den Bildschirmrand hinauszugehen (ein Scrollen darf nicht erforderlich werden).

      Es gibt sicher die Möglichkeit die eingestellte Bildschirmauflösung mit JavaScript zu ermitteln und die gefundenen Werte für die Breite und Höhe der Anzeige zu verwenden.

      Beispiel: <img src="bild1.jpg" width="368" height="383">
      Statt der hier fixen Werte 368 und 383 sollten die mit JavaScript ermittelten Werte (als Variabble!) verwendet werden.

      Hat wer ein einfaches Beispiel wie die Ermittlung aussehen soll und wie diese Werte dann bei width und height einzusetzen sind?

      Vielen Dank.
      Gerhard.
    • Das Bild sollte auf dem Schirm möglichst groß angezeigt werden ohne über den Bildschirmrand hinauszugehen (ein Scrollen darf nicht erforderlich werden).

      Da wird: <img src="bild1.jpg" width="100%" height="100%">
      nicht immer zuverlässig gehen.
      Da hilft nur JS durch Ermittlung von Anzeigebereich + Bildgröße.
      Ein ungeprüftes Beispiel: Friedels Homepage - Anleitungen für Webseitenbauer

      Gruß
      Thomas

      PS. Noch ein Beispiel angehängt. Wenn kleine Bilder nicht vergrößert werden sollen, sieht oft unschön aus, so muß JS noch entsprechend angepasst werden.


    • @Thomas, das ist wohl wahr. Bin mit css nicht fitt und greife meist noch auf alte JS-Beispiele zurück. So sollte es sicher browserübergreifend gehen:

      HTML-Quellcode

      1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      2. <html>
      3. <head>
      4. <meta name="generator" content="Scribe! 2 [http://scribe.de]" />
      5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
      6. <meta http-equiv="Content-Style-Type" content="text/css">
      7. <style type="text/css">
      8. <!--
      9. body {
      10. overflow:hidden; // keine Scrollbars
      11. }
      12. #Bild{
      13. width:*;
      14. height:100%;
      15. vertical-align:top;
      16. alignment:left;
      17. border:0;
      18. }
      19. .anzeigen{
      20. width:*;
      21. height:100%;
      22. vertical-align:top;
      23. alignment:left;
      24. border:0;
      25. }
      26. -->
      27. </style>
      28. </head>
      29. <body>
      30. <div id="Bild">
      31. <!--
      32. Bild-Ziel anpassen
      33. -->
      34. <img border="0" class="anzeigen" src="HE-001.jpg">
      35. </div>
      36. </body>
      37. </html>
      Alles anzeigen


      Gehe, dann aber einmal davon aus, dass die Bildhöhe=Fensterhöhe und das Bildformat nicht verzerrt werden soll.

      Gruß
      Thomas
    • THFR;899727 schrieb:

      @Thomas, das ist wohl wahr. Bin mit css nicht fitt und greife meist noch auf alte JS-Beispiele zurück.

      Ich auch nicht, da geht einfach nicht in meinem Kopf, viel zu Abstrakt
      das ganze :-D

      THFR;899727 schrieb:

      Gehe, dann aber einmal davon aus, dass die Bildhöhe=Fensterhöhe und das Bildformat nicht verzerrt werden soll.

      Ich gehe davon aus, das die Bildbreite dem Browser angepasst werden soll
      und die Höhe egal ist. Nach unten ist ja unendlicher Platz, aber in der
      Breite möchte keiner Scrollen ;-)
      Gruß Thomas

      Wenn ich lügend sage, dass ich lüge, lüge ich oder sage ich Wahres?