Ergebnis 1 bis 3 von 3

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

  1. #1
    Azubi(ne)
    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

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

    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...
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Azubi(ne)
    Themenstarter

    Registriert seit
    22.01.2007
    Beiträge
    74
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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-Code:
    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;
        }



Ähnliche Themen

  1. Hilfe beim content refresh und erhalt der Daten
    Von lissy23 im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 26.02.2008, 14:06
  2. Bilder bewegen lassen, aber wie ?
    Von Bianca77 im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 07.09.2007, 18:30
  3. <div> breite
    Von ggsm im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 14.09.2005, 18:31
  4. suche Bannererstellung,zahle mit paypal sofort nach erhalt
    Von carrepair im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 13
    Letzter Beitrag: 22.02.2005, 15:39
  5. Bilder zum Download anbieten aber geht nicht
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.12.2003, 16:55

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •