Bild entweder in der Breite oder in der Höhe anpassen

[Taney]

Hallo Forum,
kann man eigentlich problemlos Bilder entweder der Breite nach bzw. der Höhe nach an einen Rahmen anpassen?
Bisher habe ich die Bilder unserer Mitglieder der höhe nach festgeleget (200px). Die breite wäre dann variable.
Es gibt aber Mitglieder, die haben ein ewig breiter Bild.

Könnte man das wie in diesem Beispiel (http://www.angesagt.de/angesagter.html) je nach Situation entweder der Höhe bzw. nach der Breite anzupassen?

Für Eure Bemühungen bedanke ich mich im Voraus.
Viele Grüße
Taner

[Daniel FR]

Nehmen wir an, die Bilder sollen eine maximale Höhe und Breite von jeweils 200px nicht überschreiten. Dann packst du das Bild in einen umgebenden Container von 200px Breite und 200px Höhe. Das Bild im Container skaliert automatisch mit max-width und max-height 100%. Das funktioniert allerdings nur in Browsern, die max-width und max-height korrekt umsetzen, also nicht im M$IE.

HTML:

<div class="bildbox">
  <img src="bild.jpg" />
</div>

CSS:

.bildbox
{
height:200px;
width:200px;
}

.bildbox img
{
max-height:100%;
max-width:100%;
}

[buffy2511]

Browserunabhängig hättest Du ansonsten noch die Möglichkeit mittels php eine Resize-Funktion einzubauen. Da kannst Du dann ganz genau angeben, welche maximalen Maße Dein Bild haben soll. Es wird dann automatisch runtergerechnet.

[Daniel FR]

Browserunabhängig hättest Du ansonsten noch die Möglichkeit mittels php eine Resize-Funktion einzubauen. Da kannst Du dann ganz genau angeben, welche maximalen Maße Dein Bild haben soll. Es wird dann automatisch runtergerechnet.

Das wäre wohl die bessere Lösung, auch wegen der Dateigrößen.
Es muss aber auch Möglichkeiten geben, den Upload zu großer Bilder zu blockieren (d. h. den Kunden zu erziehen ). Jedenfalls kenne ich das von Foren. Da kann man i. d. R. keinen Avatar hochladen, der größer als ein vorgegebener Maximalwert ist.

[Corsachriz]

oder man gibt dem div container ein

overflow:hidden

, so dass größere Bilder genau dort abgeschnitten werden, wo der container endet. natürlich sollte man dennoch die max. Bildgröße festlegen, sonst können die user high-res pics hochladen, und man sieht nur die obere linke ecke (und dein Server wird voll )

[Taney]

Hallo, vielen Dank für die Antwort.
Ich werde mal gleich bei Gelegenheit die Variante von Daniel testen. Danke erstmal

overflow:hidden

Dies würde nicht in Frage kommen, da einfach das abschneiden von den Bildern schlimm aussehen würde. Lieber automatisch skalieren.

Die beste Möglichkeit wäre es, wie buffy schon schreibt per Resize das einzustellen, nur läuft unsere Community auf .jsp Basis.
Am besten wäre es, wenn man beim Upload eine bestimmte Größe erzwingen könnte, bzw. die User laden ein Bild in ein Vorschaufenster hoch und haben ein Rechteck zur Verfügung, mit der Sie über das Bild fahren und das Bild abschneiden können. (Ich hoffe, ich habe es verständlich erklärt? )

Viele Grüße aus Stuttgart
Taner

[angesagt]

Die beste Möglichkeit wäre es, wie buffy schon schreibt per Resize das einzustellen, nur läuft unsere Community auf .jsp Basis.
Am besten wäre es, wenn man beim Upload eine bestimmte Größe erzwingen könnte, bzw. die User laden ein Bild in ein Vorschaufenster hoch und haben ein Rechteck zur Verfügung, mit der Sie über das Bild fahren und das Bild abschneiden können. (Ich hoffe, ich habe es verständlich erklärt? )

Viele Grüße aus Stuttgart
Taner

man nehme ganz einfach js für die auswahl des bereiches
und man schreibt diese funktion in jsp um..

thumb("grafik.jpg","image/jpeg", 'jpg',247,343, $file ,100 );

function thumb($srcFile, $srcType, $dstType, $dstWidth, $dstHeight, $dstPath,$quality=90)
{
   if ($srcType == "image/jpeg")
       $handle = imagecreatefromjpeg($srcFile);
   else if ($srcType == "image/png")
       $handle = imagecreatefrompng($srcFile);
   else if ($srcType == "image/gif")
       $handle = imagecreatefromgif($srcFile);
   else
       return false;

   if (!$handle)
       return false;
     
   $srcWidth  = imagesx($handle);
   $srcHeight = imagesy($handle);
 
  
   if ($srcWidth >= $dstWidth && $srcHeight >= $dstHeight)
   {
     
       $newHandle = imagecreatetruecolor($dstWidth, $dstHeight);
       if (!$newHandle)
           return false;
           
       if($srcHeight < $srcWidth)
       {
           $ratio = (double)($srcHeight / $dstHeight);

           $cpyWidth = round($dstWidth * $ratio);
           if ($cpyWidth > $srcWidth)
           {
               $ratio = (double)($srcWidth / $dstWidth);
               $cpyWidth = $srcWidth;
               $cpyHeight = round($dstHeight * $ratio);
               $xOffset = 0;
               $yOffset = round(($srcHeight - $cpyHeight) / 2);
           } else {
               $cpyHeight = $srcHeight;
               $xOffset = round(($srcWidth - $cpyWidth) / 2);
               $yOffset = 0;
           }

       } else {
           $ratio = (double)($srcWidth / $dstWidth);

           $cpyHeight = round($dstHeight * $ratio);
           if ($cpyHeight > $srcHeight)
           {
               $ratio = (double)($srcHeight / $dstHeight);
               $cpyHeight = $srcHeight;
               $cpyWidth = round($dstWidth * $ratio);
               $xOffset = round(($srcWidth - $cpyWidth) / 2);
               $yOffset = 0;
           } else {
               $cpyWidth = $srcWidth;
               $xOffset = 0;
               $yOffset = round(($srcHeight - $cpyHeight) / 2);
           }
       }

       if (!imagecopyresampled($newHandle, $handle, 0, 0, $xOffset, $yOffset, $dstWidth, $dstHeight, $cpyWidth, $cpyHeight))
           return false;
       imagedestroy($handle);
            
            if( $dstWidth <= 150 ){    
                #$newHandle  = set_sharpnes( $newHandle, $dstWidth, $dstHeight );
            }

            // $newHandle = contrast($newHandle,$dstWidth,$dstHeight );    
                
       if ($dstType == "png")
           imagepng($newHandle, $dstPath);
       else if ($dstType == "jpg")
           imagejpeg($newHandle, $dstPath, $quality);
       else if ($dstType == "gif")
           imagegif($newHandle, $dstPath);
       else
           return false;
       imagedestroy($newHandle);
       return true;

   } else {
       return "Sorry aber .... ";
   }
} 

[Taney]

Hallo, vielen Dank "angesagt", ich werde schauen, was sich machen lässt

Was ich auf jedenfall noch naher gleich testen muss, ist die Empfehlung von "Daniel FR", dies wäre auch interessant für andere Bilder, anstatt Profilbilder.

Viele Grüße
Taner