HTML Bildgröße in Prozent der Bildgröße - nicht prozent der Bildschirmgröße!

...komplette Frage anzeigen

4 Antworten

Bei height=\"\" width=\"\" im Script die wirkliche Größe nehmen und dann mit css verkleinern style="width:20%; height:auto"

Reine HTML-CSS-Lösung

<div id="imgwrapper">
    <img class="dummy" src="[Pfad-zum-Bild]" />
    <div id="innerwrapper>
        <img class="image" src="[Pfad-zum-Bild]" />
    </div>
</div>

Der Pfad zu beiden Bildern ist identisch. (Das erste Bild wird benötigt, um die "Originalgröße" des aktuellen Bildes zu ermitteln. Das zweite Bild wird an der gleichen Stelle angezeigt.)

Dazu folgendes CSS:

#imgwrapper {overflow:hidden;position:relative;float:left;}
#imgwrapper img.dummy {float:left;visibility:hidden;width:auto;}
#innerwrapper {position:absolute;top:0;left:0;bottom:0;right:0;}

/*************
    HIER tragen wir die skalierte Größe des Bildes ein 
***************/
#innerwrapper img.image {width:20%;} 

Das ist 100%ig browserkompatibel, weil wir nur Standard-HTML und Standard-CSS verwenden.

WhiteGandalf 01.02.2013, 15:10

Da müssen dann aber die aufeinander folgenden Bilder ineinander geschachtelt werden. Sonst gibt's Leerraum entsprechend Originalgröße. Oder läßt sich der eventuell auch vermeiden? Weil: Das jeweils nächste rechts folgende Bild soll ja um die Breite des inneren skalierten Elements (plus ein geringfügiger Abstand) nach rechts versetzt sein, oder?

0
Unsinkable2 02.02.2013, 05:48
@WhiteGandalf

Das "dummy"-Image wird nicht angezeigt (visibility:hidden). Es wird aber benötigt, um den Browser über die echte Bild-Größe zu informieren; genauer: die Größe des Bildes als Fläche zu beanspruchen. Davon werden dann die prozentualen Größen runtergerechnet, so dass das "image"-Bild dann 20% seiner eigenen Größe und nicht 20% des verfügbaren Platzes, beansprucht.

0
Gwynplaine 02.02.2013, 17:07

Die Lösung ist vielleicht für das spezielle Problem geeignet, aber praktisch vollkommen untauglich. Das unsichtbare Bild nimmt weiterhin den riesen Raum ein, den es auch einnehmen würde, wenn es sichtbar wäre.

Stattdessen würde ich die Bilder vorher per PHP und z.B. ImageMagick skalieren und eine Thumbnail-Version des Bildes abspeichern. Diese sollten als Vorschaubild geladen werden. Damit reduzierst Du den Traffic und die Ladezeit Deiner Seite. Aus diesem Grund würde ich Dir auch von der JavaScript-Variante unten abraten, die m.E. allerdings schon wesentlich sinnvoller ist als die reine HTML-CSS-Variante.

Hier geht es um die dynamische Größenänderung eines Bildes, also sollte auch dynamischer Code benutzt werden. JavaScript wäre in Ordnung, PHP wäre optimal.

0

vorher die tatsächliche Bildgröße ermitteln und dann davon 20% anzeigen lassen

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript">
      var img = new Image();
      img.src = 'fade01.jpg';
      img.onload = function() {
        document.getElementById('pic').src = img.src;
        document.getElementById('pic').style.height = (this.height*0.2)+"px";
        document.getElementById('pic').style.width = (this.width*0.2)+"px";
      }
    </script>
  </head>
  <body>
    <img id="pic" />
  </body>
</html>

Was möchtest Du wissen?