Maximalhöhe/-breite für Bilder, aber Erhalt der Proportionen

chuqa

Hallo allerseits,

ich versuche grad eine kleine Galerie zu basteln. Dazu habe ich je Album eine Übersichtsseite, die sämtliche Bilder klein in Form einer Tabelle darstellt. Nun hat jede Zelle eine bestimmte Höhe und Breite. Die Bilder darin sollen die Höhe und Breite nicht überschreiten. Außerdem soll je nach Proportion entweder die Höhe oder die Breite entsprechend voll ausgefüllt werden. Sind die Seitenverhältnisse nicht gleich soll die kürzere Seite aber nicht auf die Größe der Tabellenzelle getreckt werden, so dass das Bild verzerrt wird. Am Besten dazu mal ein Beispiel:
Angenommen meine Tabellenzellen sind 100px X 100px
Jetzt habe ich drei Bilder

das Erste hat eine Seitenverhältnis (Höhe : Breite) von 4:3
das Zweite hat ein Seitenverhältnis (Höhe : Breite) von 3:4
das Dritte hat ein Seitenverhältnis (Höhe : Breite) von 1:1

Die Bilder sollen nun folgende Maße in den Zellen haben

das Erste soll die Maße (Höhe X Breite) von 100px X 75px haben
das Zweite soll die Maße (Höhe X breite) von 75px X 100px haben
das Dritte soll die Maße (Höhe X Breite) von 100px X 100px haben

Die Bilder sind alle entsprechend größer, dann für die Detailansicht.
Ich habe es mit

Code

max-width: 100px;
max-height: 100px;

für die Bilder probiert, aber da werden die Bilder auf die gesamte Größe gestreckt, sowohl in der Höhe als auch in der Breite, sodass das Bild verzerrt wird. Die Proportionen von den Bildern sind unbekannt.
Kann mir jemand helfen, wie ich das CSS von den Bildern definieren muss, damit ich den Effekt bekomme?

synaptic

hört sich an wie die suche nah der eierlegenden wollmilchsau
also du musst zuvor ermitteln, welche grösse das bild hat, dann entsprechend des grösseren wertes die tabelle anpassen.

ich stell mir des so vor:
beim bild:
breite = 320px
höhe = 240px

prüfung ob beide seiten gleich = quadratisch, wenn nich prüfen welche seite die grössere ist.
bei den werten oben weisste des ding is horizontal, getauscht wäre es vertikal...

dann sollteste 3 verschiedene css-klassen haben und entsprechend der prüfung vergeben.
eine klasse für horizontal rechteckige bilder, eine für vertikale rechteckige bilder und eine für quadratische bilder.

die frage ist lediglich, wie du das ganze realisieren willst, also ob mit javascript oder php oder oder oder
mit javascript hab ich so ne ermittlung schon einmal gescripted.. mit php und den anderen serverseitigen sprachen weiß ich net wie man sowas machen könnte...

chuqa

Ok danke, ich dachte es gibt vielleicht eine CSS-Mölichkeit.
Ich habe es jetzt so gelöst, dass ich über PHP die CSS-Angabe formuliere. Dazu gibt es die Funktion

Code

getimagesize($pic)

die mir die Breite und die Höhe des Originalbildes zurückgibt. Damit kann ich dann das Verhältnis ausrechnen und entsprechend das CSS für das entsprechende Bild generieren. Folgende kleine Klasse habe ich dafür gebastelt, die bisher aber nur für quadratische Zellen funktioniert (für mich allerdings bisher völlig ausreichend):

PHP

class image{


    private $height;
    private $width; 
    private $ratio;         // Höhe : Breite
    private $maxCellHeight;
    private $maxCellWidth;

    function init($pic){
        $bildinfos = getimagesize($pic);
        $this->width = $bildinfos[0];
        $this->height = $bildinfos[1];
        $this->ratio = $this->height / $this->width;
    }

    function setMaxCellHeight($cellheight){
        $this->maxCellHeight = $cellheight;
    }  

    function setMaxCellWidth($cellwidth){
        $this->maxCellWidth = $cellwidth;
    }

    // für quadratische Tabellenzellen
    function setMaxCellSize($size){
        $this->setMaxCellHeight($size);
        $this->setMaxCellWidth($size);
    }

    function getCss(){
        $cssStr = "";
        if ($this->ratio < 1){
            $cssStr .= "width:".$this->maxCellWidth."px;";
            $tempHeight = $this->maxCellWidth * $this->ratio;
            $cssStr .= "height:".$tempHeight."px;";
        } else {
            $cssStr .= "height:".$this->maxCellHeight."px;";
            $tempWidth = $this->maxCellHeight / $this->ratio;
            $cssStr .= "width:".$tempWidth."px;";
        }

        return $cssStr;
    }


}

Alles anzeigen

Tags