Optimale Bildgröße

[Markus]

Moin,

möchte ein Bild immer so ausgeben, dass es optimal auf den Bildschirm passt - mit der Breite kriege ich das hin, wobie Bilder, die kleiner als die bildbreite sind leider vergrößert verden ... das sollte nicht sein und zusätzlich würde ich auch gerne noch die Höhe an die Bildschriemhöhe optimal anpassen ...

Mein Ansatz:

<script>
var bildbreite = screen.width-50;
document.write("<center><img src='/bilder/test.jpg' border=0 width='" + bildbreite + "'></center>");
</script>

Kann mir jemand weiterhelfen?

Markus

[blue.tiger]

Ich würde dir empfehlen verschiedene Seiten für jede oft genutzte Auflösung zu erstellen und den User per JavaScript auf die entsprechende Seite für seine Auflösung zu leiten.

mfg

[Orlando]

Hi,

Ich würde dir empfehlen verschiedene Seiten für jede oft genutzte Auflösung

wie definierst du "oft genutzt"?

zu erstellen und den User per JavaScript

Fällt aus, ist zu oft deaktiviert oder eingeschränkt.

auf die entsprechende Seite für seine Auflösung zu leiten.

Wenn man dadurch gezwungen ist, 50 Versionen einer Seite zu schreiben, würde ich dieses Konzept nochmal überdenken und stattdessen *eine* skalierbare Version entwickeln.

BTW, die Auflösung hat mit der Fenstergröße so viel zu tun wie ein saftiger Apfel mit einer faulen Birne ;)

LG Orlando

[Vimes]

Moin,

möchte ein Bild immer so ausgeben, dass es optimal auf den Bildschirm passt - mit der Breite kriege ich das hin, wobie Bilder, die kleiner als die bildbreite sind leider vergrößert verden ... das sollte nicht sein und zusätzlich würde ich auch gerne noch die Höhe an die Bildschriemhöhe optimal anpassen ...

Mein Ansatz:

<script>
var bildbreite = screen.width-50;
document.write("<center><img src='/bilder/test.jpg' border=0 width='" + bildbreite + "'></center>");
</script>

Kann mir jemand weiterhelfen?

Zunächst: mit window.innerHeight bzw. window.innerWidth bekommst du die Größe des Anzeigefensters. Das ist allemal besser, als festzustellen, mit welcher Auflösung der Besucher arbeitet (von wegen Fenster und so).
die Bildbreite kannst du auch ermitteln, das Image-Objekt kennt height und width.

var bild=new Image();
bild.src='/bilder/test.jpg';
var hoch=bild.height;
var breit=bild.width;

Der Rest sind dann nur noch Abfragen zum setzen der endgültigen Breite.
Die Frage ist, ob du das Höhen/Breiten-Verhältnis des Bildes erhalten willst, oder das Bild auf die Fenstergröße anpassen willst.

Wenn das Bild nicht vergrößert werden soll geht bspw.

var newHeight=(window.innerHeight>hoch)?hoch:window.innerHeight;

der Rest läuft dann genauso.

das <img> tag kennt auch height='', also kannst du das auch selbst festlegen.