Bilder in Hoch- und Querformat an DIV anpassen

html.de-Forum HTML, XHTML & CSS
1

Moin moin liebe Gemeinde,

ich bastel gerade an einer Gallery, die ich dynamisch mit Bildern im Hoch und Querformat befülle. Wenn ich nun eine Höhe von 100% festlege, (HTML) wird das Bild in der Höhe angepasst. In der Breite ja nicht, und da ist mein Problem. Bilder im Hochformat werden so richtig angezeigt, da sie ja höher sind als breit.

Bei Bildern im Querformat allerdings, kommt es vor, dass diese nicht das Maß des DIV´s (Breite) haben, sondern größer sind. Somit ragen sie aus dem DIV hinaus.

Ich hoffe ihr versteht mich…

Anbei mein Code:

[PHP]

    <?php 
        for($a = 0; $a < $zahlbilder; $a++)
    {
    echo '<li><img height="100%" src=../pixcam/gallery/images/tiere/', $a, '.jpg></li>';
    }

    ?>

[/PHP]

Css:

[CODE]
.bilderliste {
list-style-type: none;
margin: 0;
padding: 0;
width: 880px;
}

.bilderliste li {
float: left;
border: 1px solid #ff9900;
width: 220px;
height: 150px;
margin: 3px;
padding: 3px;
}[/CODE]

Und das ist das, was dabei rauskommt:

Vielen Dank!

2

Ganz grundsätzlich lässt sich das Problem möglicherweise mit

overflow:hidden;

im das Bild umgebende Block-Element lösen.
Ein anderer Ansatz wäre, dem Bild eine Maximalbreite und -höhe zu vergeben und den Rest dem Browser zu überlassen:

img {
  height:auto;
  height:100px; /* je nach dem */ 
  width:100px; /* je nach dem */
  width:auto;
}

Schlecht ist es aber immer, das Skalieren der Bilder HTML oder CSS zu überlassen, besser ist es, die Bilder mit PHP auf Maß zu bringen. Das hat zwei Gründe:

  1. Durch den Browser verkleinerte Bilder sehen nie gut aus, was an der etwas primitiven Technik liegt, mit der Browser Bilder verkleinern. (Es werden so lange Pixelreihen und-zeilen entfernt, bis das Bild passt.)
  2. Die Ladezeiten sind natürlich unverhältnismäßig hoch, wenn die Bilder, die du überträgst, virl größer sind, als erforderlich.
    Hilfreiche Funktionen bei der Bildumwandlung mit PHP sind hier z.B. imagecopyresampled() und getimagesize().
    Beide sind in der PHP-Standard-Installation enthalten.
3

Danke erstmal, die Bilder sind nicht wesentlich größer. Ich schau mir das mit dem verkleinern mit PHP mal an.

4

Hallo,

wenn das mit php anschaust hilft das vielleicht: Create Images Thumbnails And Cache Them In PHP | #! code
(einer von vielen fertigen scripte)

denn wenn das mit php machst sollte man auch immer auf den server achten, nicht das jeder besucher immer alle 100 tumbs einer galerie generiert werden, wenn das einmal reicht, also cache.
sonnst geht jeder server in die knie ab einer geringen besucher anzahle.

Cheffchen

5

Danke für den Hinweis, habe mir das alles jetzt so zurecht gelegt, dass es passt. Es geht in diesem Fall auch nur darum, dass mein Geschäftspartner auch ohne weiteren Aufwand betreiben zu müssen Bilder hochladen kann. Also ist das alles ein bisschen schlanker gebaut :slight_smile:

Danke trotzdem
Horrido