René: Bild verkleinern

Hi,

wie kann ich ein Bild mit CSS so verkleinern das es ohne das man scrollen muss auf den Bildschirm passt?
Bei Höhe=100% und Breite=100% wird bei mir die Höhen-Angabe ignoriert!

Was mache ich falsch?

Gruß,
René

  1. Noch schnell ein Beispiel

    1. Hi René,

      Noch schnell ein Beispiel

      Setz mal alle Ränder auf Null.

      Viele Grüße
      Mathias Bigge

      1. Hi Bigge,

        Hi René,

        Noch schnell ein Beispiel
        Setz mal alle Ränder auf Null.

        Das scheint nicht zu klappen...

        René

  2. Hallo,

    wenn Du strict kodierst, darf <img> nicht direkt im <body> stehen, aber das war hier nicht das Problem.

    Auf was beziehen sich die 100% denn? Die Elternelemente haben keine definierte Größe. Wenn Du <html> und <body> ebenfalls auf 100% setzt (und das in strict erforderliche wrapper-Element (hier das <div>) um das <img> ebenfalls), dann klappt es:

      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
      <title>Zu hoch!</title>  
      <style type="text/css">  
        html, body { border:0; margin:0; padding:0; height:100%; width:100%; }  
        div, img { height:100%; width:100%; border:0; margin:0; padding:0; }  
        img { display:block; }  
      </style>  
    </head>  
    <body>  
      <div>  
        <img src="b.png" alt="gibbet ned" />  
      </div>  
    </body>  
    
    

    In IE6, Opera 9.01 und Firefox 2 stimmt es so.

    Shepard

    1. Hi,

      wenn Du strict kodierst, darf <img> nicht direkt im <body> stehen, aber das war hier nicht das Problem.

      Stimmt mir geht es um das Problem in einem andern Zusammenhang, aber damit kann man es ab leichtesten verdeutlichen.

      Auf was beziehen sich die 100% denn? Die Elternelemente haben keine definierte Größe. Wenn Du <html> und <body> ebenfalls auf 100% setzt (und das in strict erforderliche wrapper-Element (hier das <div>) um das <img> ebenfalls), dann klappt es:

      [...]

      In IE6, Opera 9.01 und Firefox 2 stimmt es so.

      So wie du meine Frage verstanden hast stimmt es.

      Ich will aber das dabei auf jeden Fall das Seitenverhälltnis erhaltenbleibt!
      Ich habe jetzt width mit max-width ersetzt und es sieht so aus wie ich es mir wünsche.
      Danke das du mich weiter gebracht hast!

      PS: In deinem Schnipsel fehlte das </html> SCNR

      1. PS: In deinem Schnipsel fehlte das </html> SCNR

        ich wollte mich halt auf das Wesentliche konzentrieren:-)