Centrarea unei serii de imagini diferite in DIV-uri (containere) identice

Ca programator web esti pus uneori in fata unei cerinte de centrare a unei serii de imagini cu dimensiuni diferite in DIV-uri (sau alt gen de containere) identice ca dimensiuni.

Bineinteles ca trebuie gasita o solutie generala prin care se centreaza automat aceste imagini in containerele lor.

Exemplul este preluat de pe site-ul nadiacoaneci.eu, unde in partea de os a homepage-ului este afisat un widget in care ruleaza (vertical) un set de imagini sigla. Fiecare imagine este plasata intr-un div cu latime si inaltime fixa, avand si un acelasi padding. Imaginile au latimea mai mica sau cel mult egala cu latimea div-ului exterior; la fel si inaltimea.

Setul de imagini provine din interogarea unei baze de date si intr-o bucla creata in codul php se genereaza codul html al widgetului. Pozitia naturala a unei imaginii in interiorul div-ului exterior este in coltul din stanga sus al div-ului.

Exista si solutii exlusiv CSS, dar de data aceasta o solutie la indemana poate fi:

+ obtinerea dimensiunilor imaginii

+ calcularea marginilor laterale pe latime si pe inaltime ale imaginii

Sa vedem codul*:

//obtinem imaginea (src, alt)

$imagine = get_the_image( array( ‘size’ => ‘carousel-home-parteneri’, ‘before’ => ‘<div class=”post-thumb” >’, ‘after’ => ‘</div>’, ‘echo’ => false, ‘format’ => ‘array’ ));
//obtinem latimea si inaltimea imaginii
list($w1, $h1) = getimagesize(str_replace(‘http://www.nadiacomaneci.eu/’, ‘/home/nadiac/public_html/’, $imagine[‘src’]));

//afisam imaginea calculand marginile imaginii pentru centrare in div-ul div-imagine

echo ‘<img src=”‘.$imagine[‘src’].'” width=”‘.$imagine[‘width’].'” height=”‘.$h1.'” class=”‘.$imagine[‘class’].'” alt=”‘.$imagine[‘alt’].'” style=”margin:’. ((int)(94 – $h1) / 2).’px ‘.((int)(120 – $w1) / 2) . ‘px’ . ‘” /></a>’;

* – Lucram in wordpress,deci avem cod html imbricat cu cod php dar am omis tag-urile de deschidere si inchidere cod php

Functia get_the_image nu ofera intotdeauna valorile width si height. Ca urmare le obtinem cu functia nativa php  getimagesize care ia ca parametru calea locala catre fisierul imagine.

Containerul div-imagine are o inaltime si latime fixe, aceleasi pentru fiecare imagine: height=94px, width=120px. Calculul marginilor imaginii in interiorul containerului div-imagine pentru a plasa imaginea exact in centrul div-ului, atat pe latime cat si pe inaltime se face dupa formula:

margin-top=margin-bottom= ((int)(94 - $h1) / 2);

margin-left=margin-right= ((int)(120 – $w1) / 2);

unde $h1 si $w1 sunt inaltimea, respectiv latimea imaginii, calculate deja;

Folosindu-ne de avantajul imbricarii codului html+php, cream atributul style astfel:

style="margin:'. ((int)(94 - $h1) / 2).'px '.((int)(120 - $w1) / 2) . 'px' . '"

Un exemplu concret al utilizarii acestei metode il gasiti pe site-ul web FNC, dezvoltat de Sector web, in pagina de Parteneri proiecte