Bilder die ausbrechen 25. September 2004 um 00:00 Uhr /

Wenn man ein CMS verwendet hat man immer wider mal das Problem dass man nicht weiß was der Autor damit alles anstellen wird. Einen großen Schrecken erfahren wir wenn dieser zu große Bilder hoch lädt. Also nicht unbedingt von der KB Größe sondern von den Dimensionen her.

Wenn das Bild groß ist kommt es sehr leicht vor, dass unser säuberlichst erstelltes Design dadurch total zerschossen wird, weil es entweder herausragt und andere Teile der Seite verdeckt, oder weil es im IE sein Elternelement so ausbreitet dass das ganze Design zerstört wird.

Andererseits hat der Autor wahrscheinlich auch Gründe dafür dass er das Bild so groß zeigen will, vielleicht ist das was er Zeigen will wirklich besser erkennbar, wenn es so groß ist - und warum Leuten die sich einen großen Bildschirm gekauft haben, damit sie mehr Platz haben und sich über ein solch großes Bild freuen, krampfhaft ein kleines vorsetzen? Man könnte das mittels des CMS natürlich vorausbestimmen und nur kleine Bilder beim Hoch laden akzeptieren, oder zu große automatisch verkleinern, was wie oben erwähnt nicht die optimale Lösung ist.

Aber da gibt es doch die Eigenschaft max-width. Diese besagt, dass Das Bild eine Maximale Breite von x px/%/em (usw.) haben darf. Uns geht es ja um die Breite, da unsere Seiten sich in den Meisten fällen nach unten frei ausbreiten können. Mit max-height würde im übrigen genau so für eine Seite die sich in die Breite ausbreitet funktionieren. Wenn wir bei einem Bild die Höhe und die Breite angeben wird der Browser diese Angaben benutzen, und an der Stelle wo das Bild hin soll, einen Platzhalter beim rendern hinstellen, somit hüpft die Seite nicht unnötig hin und her. Wenn wir dann einen Wert davon weglassen und den anderen beliebig setzen nimmt der Browser den einen Wert als festen Wert, und rendert den anderen Wert proportionell dazu, so dass das Bild richtig verkleinert, oder vergrößert wird.

Das machen wir uns zu Nutze, und bestimmen, dass jedes Bild eine Maximalbreite von ein wenig mehr als die Breite des Elternelementes haben soll, also zum Beispiel 95%. Das heißt für uns in der CSS Datei: #content img { max-width: 95%; }. Wobei #content der Bereich ist in diesen der Autor seine Bilder hineinposten kann. Es ist wichtig dass man das so eingränzt, denn sonst werden alle Bilder auf der Seite kleiner, und das kann zu komplikationen mit neueren Browsern führen.

Ich höre schon welche stöhnen »Aber das funktioniert doch gar nicht im IE, dann kann man das ja nicht benutzen.«. Ich frage mich eigentlich warum nicht? Sollen wir auf dem Technischen Stand eines drei Jahre alten Browsers wirklich stehen bleiben? Nein - außerdem stört es den IE ja nicht, er ignoriert es einfach. Darüber hinaus gibt es ja auch noch den IE7 von Dean Edwards, welcher schon hervorragend funktioniert, und auch so etwas erlaubt. Warum also auf etwas verzichten wenn es doch schon in allen gängigen Browsern funktioniert?

Jetzt sind eigentlich alle glücklich. Wer einen kleinen Bildschirm hat bekommt kleine Bilder, wer einen großen hat große, aber sie werden niemals gestreckt, sondern bleiben maximal so groß wie sie ursprünglich waren. Das einzige Manko ist dann noch dass diese Methode die Autoren dazu verführt riesige Bilder hochzuladen, die dann bei einen Modembenutzer wiederum zu sehr langen Ladezeiten führen. Dies kann man aber wiederum sehr gut mittels der Uploadfunktion des CMS einstellen.

Sinnvoll ist diese Vorgehensweise sicherlich fast nur für Seiten mit einem flüssigen Layout, was eigentlich so oft wie möglich anstrebbar sein sollte. Bei einem Starren Design könnte man das viel Einfacher mittels des CMS und einer Maximalbreite der Bilder beim Hochladen machen. Das spart dem Besucher der Seite auch unnötige Ladezeit. Allerdings weiß man ja nicht ob man das Design nächstes Jahr nicht vielleicht doch auf flüssig umstellt, und sich somit diese schöne Möglichkeit für die älteren Artikel, die sich dann im Archiv befinden, verbaut hat.

---