Bildpräsentation

Bilder skalieren

Wieder einmal widme ich mich einem Thema aus selfhtml.wiki. Mit scale() lässt sich die Größe von Elementen ändern. Hätte ich daran nicht etwas herumgefummelt, würde ich das Beispiel nicht zitieren, denn wer schneidet seine Bilder schon quadratisch zu, um hier Freude zu haben. Mit der Vorgabe: .galerie figure img { width: 225px; height: 225px; } verzerrt man ansonsten seine Errinnerungen ganz schrecklich. In den meißten Fällen wird ein 2:3 oder 3:4 Format bevorzugt, dass dann gestaucht zum Einsatz kommt.

Für diejenigen, die das Beispiel kennen, erläutere ich beginnend die geänderten CSS-Eigenschaften. Soviel ist es nicht.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 /* DATEI: scale.css */ /* angepasstes beispiel aus selfhtml.wiki*/ .galerie { position: relative; top: 8px; left: 100px; width: 764px; box-sizing: padding-box; padding: 10px 0 0; border: solid 1px teal; } .galerie figure { background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); display: inline-block; cursor: zoom-in ; width: 225px; height: 225px; margin: 0 0 15px 15px; overflow: hidden; padding: 5px; -webkit-transition: all 0.5s ease-in; /* für Safari 5.1, Android 2.3 bis 4.3 */ transition: all 0.5s ease-in; } /* breite und hoehe werden an die Bilder angepasst .galerie figure img { width: 225px; height: 225px; }*/ .galerie figure:hover { background-color: white; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8); margin: -15px 0 0 15px; padding: 5px 5px 18px; width: 225px; z-index: 6; -webkit-transform: scale(1.8); /* für Safari, Android */ -ms-transform: scale(1.8); /* für IE9 */ transform: scale(1.8); cursor: zoom-in ; } .galerie figure:hover > figcaption {visibility: visible; } .galerie figcaption { color: #333; font: 10px Southern-Italic, cursive; position: relative; text-align: center; width: 225px; visibility: hidden; } .galerie:after { clear: both; content: " "; display: block; }

Einigen Eigenschaften habe ich komplett entfernt. Die nochmalige Eigenschaft für body bei kleinerer Bildschirmabmessung haben mir mein Layout zerstört. Die galerie-Klasse habe ich für meine Bedürfnnisse angepasst.
In 12 bis 16 ist .galerie firgure img{} auskommentiert. Den Images werden innerhalb von PHP die Style-Eigenschaften nachgereicht. Das geschieht nachfolgend in 18.
figcaptain wird verborgen und erst mit der Pseudoklasse hover .galerie figure:hover > figcaption sichtbar. In meiner Ausführung wird figcaptain nämlich nicht mehr bei Bildern im Querformat verdeckt. Sie lassen nach unten noch Platz zur Darstellung der Bildunterschrift. figure erhält einen leicht transparenten Hintergund. Das bewirkt, das scale() den Eindruck erweckt, dass hier auch Transparenzstufen erzeugt werden. Das wird nicht stimmen, aber die Wirkung finde ich gut!
In der externen Datei scale.php erfolgt die Zusammenstellung der Bilder sowie die jeweilige Eigenschaftszuweisung. Vorab ist wieder die Datei picdir.php wie in allen Beispielen für das Sammeln zuständig.

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


<?php
    $anzeige = '' ;
    $figsize = 225 ;
    while (list ($key, $val) = each ($ar_pic)) {
     if ( $key <= 3 || $key == 5 || $key == 7 || $key == 9 ){
     $pw = $ar_picW[$key] ;
     $ph = $ar_picH[$key] ;
     $format = $ph > $pw ? 'H' : 'Q' ;
      
     if ( $format == 'H' ) {
     $koef = $ph /$figsize ;
     $xkor = ( $figsize - ($pw/$koef) ) / 2 .'px';
     $ykor = 0 ;
     } else {
     $xkor = 0 ;
     $koef = $pw / $figsize ;
     $ykor = ( $figsize - ($ph/$koef) ) / 2 .'px' ; ;
     }
     $style = "style='display: inline-block; padding-top: $ykor; padding-left: $xkor; '" ;
     $koef = round($koef * 10 ) / 10 ;
     $pwk = round($pw/$koef) ;
     $phk = round($ph/$koef) ; 
     $exif = exif_read_data($val, 0, true);
     $bildtext = $exif["IFD0"]["ImageDescription"] ;
     $anzeige .= "<figure><img src='$val' alt='$bildtext' $style width='$pwk' height='$phk' />" ;
     $anzeige .= "<figcaption>$bildtext</figcaption></figure>" ;
     }
    }
?>

4 Nicht schon wieder alle Bilder. Das hier reicht!
5 bis 7 die Bildmaße müssen wieder ermittelt werden.
18 tut das, was das Mitteln der Bilder betrifft und kommt in 24 zum Einsatz.
Die Ausgabe erfolgt im section-Element vor den Erläuterungen.


  <section class="galerie">
  <?php
   include "../komponenten/scale.php" ;
   echo $anzeige ;
   ?>
  </section>>