Bild in ganz bestimmter Größe darstellen

RageNo1

Erfahrenes Mitglied
Hallo liebe Gemeinde,
ich arbeite gerade an einem Script und hänge gerade ein wenig.

Folgende Sache soll erreicht werden:
User können Bilder auf den Server hochladen.
Anschliessend soll das Bild ausgegeben werden. Aber!

Leider sind Bilder ja nicht einheitlich groß, das Verhältnis Länge zur Breite ist auch unterschiedlich, und hier kommt es nun zum Problem.

Die Bilder werden nicht resized da sie in voller Auflösung später noch gebraucht werden, es geht hier nur um eine Vorschau, Bilder mit hoher Auflösung werden bei der Ausgabe nur verkleinert dargestellt. (z.b. 1500x1000 = 150x100)

Damit nicht genug!
Die Darstellung soll so ausschauen:
beispield.jpg


Grün ist der Bereich der angezeigt wird, immer im Verhältnis 3 zu 2, sprich z.b. 150x100.
Rot ist der Bereich der nicht gezeigt wird (abgeschnittene Darstellung) da er ausserhalb der grünen Fläche liegt.
Schwarz ist quasi der Mittelpunkt des Bildes.

Zunächst wird immer geprüft welche Seite Länger ist um festzustellen ob es ein Hochformat oder Querformat ist, dann entsprechend ausgegeben.
Aber nun soll eben was übersteht nicht angezeigt werden.

Ich hoffe ihr versteht was ich meine und könnt mir einen Tipp geben womit ich das realisieren kann, die Bilder können auch gerne zugeschnitten werden (vielleicht direkt bei Upload) auf das Verhältnis 3 zu 2 aber die Qualität der Bilder sollte sollte unverändert bleiben.

Gruß Ragey
 
Also wenn das Bild in der Vorschau verkleinert dargestellt werden soll, kannst du die Größe ja entsprechend umrechnen.
Die Frage ist da jetzt nur soll die Vorschau immer mit 150 Pixel Breite bzw. 100 Pixel Höhe dargestellt werden oder soll ein bestimmter Faktor z.B. 0,5 verwendet werden und das was zu groß ist dann "abgeschnitten" werden (dann kommt noch ein bisschen CSS dazu).

PHP:
<?php
//verkleinert auf Breite 150 Pixel
$size = GetImageSize ("bild.jpg");
$faktor = (150/$size[0]);
?>
<img src="bild.jpg" width="<?php echo ($size[0]*$faktor); ?>">
<br />
<br />
<?php
//verkleinert mit Faktor 0,5 und den Rest "ausblenden"
$size = GetImageSize ("bild.jpg");
$w = ($size[0] * 0.5);
$h = ($size[1] * 0.5);
?>
<div style="width: 150 px; height:100 px; overflow:hidden; text-align:center; border-style:solid;">
    <div style="position:relative; margin-left:-<?php echo (($w - 150)/ 2); ?>px; margin-top:-<?php echo (($h - 100)/ 2); ?>px">
        <img src="bild.jpg" width="<?php echo ($w); ?>">
    </div>
</div>
 
Zurück