Bild & Bildgröße erkennen und ggf. formatieren

[Fuman]

Hallo.

Ich habe ein etwas komplizierteres Anliegen.
Kurz zur Veranschauligung:

Es werden Datensätze ausgelesen aus meiner MYSQL DB.
Unter anderem existiert eine Spalte "description".
Hin und wieder kommt es vor das in der description sowas steht:
<img src="... oder <img alt="... etc! Diese Bilder werden auf meiner Seite auch angezeigt und das sollen sie auch. Das Problem ist nur, dass manche zu große Bilder mein Design "zereisen". Ich möchte nun also meine PHP Datei so umschreiben, dass:

• bei der Ausgabe von der description nach dem Start-Tag <img gesucht wird,
• wenn eins gefunden ist soll er das Attribut "src" Suchen.
• Dann soll er logischer weise die Adresse auslesen
• und schauen ob das Bild eine bestimmte Größe nicht überschreitet.
• Wenn es die bestimmte Größe überschreitet, soll es automatisch kleiner ausgegeben werden.
• Natürlich muss dieser Vorgang nicht nur einmal durchgeführt werden. Also wenn in der description 2 oder mehr Bilder auftauchen, sollen natürlich alle formatiert werden.

Ich weiss nicht ob dazu unbedingt PHP benötigt wird. Wenn man in einem Browser ein Bild öffnen und das bspw. zu groß für die aktuelle Bildschirmauflösung ist, wird es ja auch automatisch klein gemacht. Kann man das vllt in XHTML erzwingen? Schliesslich stehen die eventuellen Bilder in einem von der Größe her festgelegten <div>.

Ich erwarte keine konkrete Lösung.
Allerdings wäre ein Lösungsansatz sehr hilfreich.

Ich danke euch und wünsche einen schönen Tag.

[pekka]

Hmm, das ganze kannst Du mit einem regulären Ausdruck erledigen. Aber besser wäre es, das Design so zu bauen daß es nicht "zerrissen" werden kann, oder?

[Fuman]

eine Designänderung kommt jetzt nicht mehr in Frage (leider)
Aber an was für "reguläre" Ausdrücke hast du denn so gedacht?

[tontechniker]

Reguläre Ausdrücke.

[ghostgambler]

Du könntest es über
<img src="" style="max-width:XYZpx; max-height:XYZpx;" />
probieren, ich weiß aber nicht ob das geht *noch nie probiert* (und der IE kann die Angaben nicht, aber dafür gäbe es ja workarounds~

[TobiaZ]

ich würd einfach die entsprechenden styleangaben reinpressen. das hat den vorteil, dass du es proportional verkleiner kannst. und letztendlich kannst du sogar soweit gehen, dass du das bild dann noch mit sich selbst verlinkst (zumindest wenn es nicht verlinkt ist.)

Aber on the fly würde ich das nicht machen.

[ghostgambler]

Original geschrieben von TobiaZ
und letztendlich kannst du sogar soweit gehen, dass du das bild dann noch mit sich selbst verlinkst (zumindest wenn es nicht verlinkt ist.)

hm? Über CSS? Oo

[TobiaZ]

Original geschrieben von ghostgambler
hm? Über CSS? Oo

Nein, natürlich nicht. Aber wenn ich sowieso schon am quellcode manipuliere, kann ich auch in einem noch a-Tags drumherum setzen.

[ghostgambler]

Original geschrieben von TobiaZ
Nein, natürlich nicht. Aber wenn ich sowieso schon am quellcode manipuliere, kann ich auch in einem noch a-Tags drumherum setzen.

Naja, also die CSS-Eigenschaften auf Bilder anwenden geht auch über ein
#id_eines_umliegenden_divs img { }
dafür muss man am HTML nichts ändern

[TobiaZ]

ja, stimmt schon. wäre jetzt gut, den quellcode zu kennen. Bei hart-codierten Größenangaben wirds nämlich schon problematisch, weil die dein CSS überschreiben würden. mit reinem CSS gings dann ohnehin nicht mehr weiter.

käme also auf den fall an, was zu tun ist. da müsste sich der TO nochmal zu äußern.

[PHP-Desaster]

Wenn dir das reicht, kannst du ja auch eine Lösung in JS basteln, welche beim Fertigladen eines Bildes entsprechende Größenanpassungen vornimmt. Ist dann natürlich davon abhängig, ob der Betrachter JS aktiviert hat. Musst du selbst entscheiden!
Alternativ könntest du beim Speichern des Datensatzes die description bereits auslesen und Bilder auf dem eigenem Server ablegen. Sind diese zu groß, passt du dies vorher an.

Sind natürlich beide Lösungen nicht die elegantesten!!

[Fuman]

Ich danke euch für eure Vorschläge.
Ich habe es nun tatsächlich via JS gelöst.
Falls mal wer das Problem hat, hier mein Code:

<html>
<head>
<script language="javascript">
<!--
var max_width = 200; // Hier muss die maximale größe von einem Bild eingestellt werden!!!

function change_image(image)
{
	image = document.getElementById(image);

if (image.width > max_width)
    {
            image.width = max_width;
    }
}
//-->
</script>
</head>
<body>
<img id="image" onLoad="change_image('image')" src="bild.jpg" alt="">
</body>
</html>

Viele Grüße