Centrowanie wiekszego elementu wewnatrz mniejszego

[marcim]

Witam.
Mam następujący problem dotyczący galerii internetowej. Mam generowane miniaturki zdjęć do wielkości 150px x 100px. Chciałbym, by każda z tych miniaturek była wyświetlana w formacie 100px x 100px, ale w taki sposób, by niezależnie od pionowego czy poziomego kadru wyświetlał się środek takiej miniaturki.
Wyświetlam zatem <img> wewnątrz diva, który ma wielkość 100 px x 100px, i ustawiony overflow:hidden. Tyle, że zawsze widać lewy górny róg miniaturki. I teraz pytanie, czy da się umieścić ten wewnętrzny IMG tak, by niezależnie od kadru widać było środek miniatury.

Zmiana sposobu tworzenia miniatur poprzez edycję skryptów php nie wchodziw grę.

[ooo_michal]

Spróbuj zamiast img ustawiać obrazek jako tło dla tego div'a. Razem z background-position: center powinno załatwić sprawę.

[gorylek]

Ewentualnie jeżeli każdy obrazek ma wielkość 100x100 to można to zrobić w ten sposób:

Kod: Zaznacz cały

<div class="kontener">
    <img src="obrazek.jpg" alt="Moja fotka" />
</div>

Css:

Kod: Zaznacz cały

 /* Eliminuje problemy z dodatkową przestrzenią pod obrazkiem w IE*/

*{
margin: 0px; 
padding: 0px;
}

/* Kontener zawierajacy obrazek o wielkosci, powiedzmy 200x200 */

.kontener
{
width: 200px;
height: 200px;
position: relative; /* WAZNE ! */
}

/* Teraz stylujemy IMG */

.kontener img
{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px; -50px;
}

Małe wyjaśnienie co do IMG. Jest tam pozycja absolutna na 50% od górnej i lewej krawędzi. Ustawi to górny, lewy róg obrazka na środek czyli całość będzie za nisko i za bardzo w prawo. Pozycjonowanie absolutne jest zawsze względem górnego lewego rogu więc po prostu przesuwamy margines o -50px czyli połowę wysokości i szerokości elementu przez co zawsze będzie na środku choćby się waliło i paliło.

Mam nadzieje że nie zrobiłem nigdzie literówki. Po nocy spędzonej z nosem w kodzie można byka strzelić przy najprostszej rzeczy.

[marcim]

Oj, nie do końca mnie zrozumieliście

Obrazek (img) ma 150x100 lub 100x150.
Chce by bylo z niego widoczne tylko 100 x 100px; wiec wkladam go w diva container:
.container {
width: 100px;
height: 100px;
overflow:hidden
}
W efekcie mam miniature 100x100, ale z lewego gornego rogu, a ja chce w przypadku:
- 150 x 100px, by byl to srodek (po 25 px po bokach obciete, a nie 50 z prawej)
- 100 x 150px, rowniez srodek ale w pionie (obciete po 25px z gory i dolu, a nie 50px z dolu)


Ps, To jest galeria tworzona skryptem, wiec nie przejdzie ustawienie tla blokowego elementu.

[ooo_michal]

Wrzuć obrazek w div 150px x 150px, daj div'owi wyrównanie tekstu center, obrazkowi wyrównanie w pionie na środek, div'ovi dodaj jeszcze górny i lewy margines -50px a całość wrzuć w div 100x100px z overflow: hidden.

[azamo]

A jeśli chodzi o fakt, że galeria jest generowana przez skrypt... nie ma chyba większej różnicy między

Kod: Zaznacz cały

<div>
<img src="<?php echo ($url_obrazka); ?>" />
</div>

a

Kod: Zaznacz cały

<div style=" background: url(<?php echo ($url_obrazka); ?>); ">
</div>

[marcim]

Ok, problem jednak nie rozwiązany

W pierwszym podejściu obrazek umieściłęm w divie 150x150px, temu dałem position relative, text-align:center; vertical-align: middle; display: table-cell.
To ostatnie było niezbędne do wycentrowania niższego obrazka w pionie. I niby wszystko ok, ale w momencie jak zacząłem go pozycjonować absolutnie, wyrównanie w pionie szlak trafił.

Kod: Zaznacz cały

<div style="width: 800px; height: 200px; margin: 0 auto; border: 1px solid black; text-align: center">
		
		<div style="width: 150px; height: 150px; overflow: hidden; border: 1px solid black; position: relative;">
			<a style="width: 150px; height: 150px; text-align: center; background: red; display: table-cell; vertical-align: middle; ">
					<img style="" src="2.jpg" />	
			</a>
		</div>
		<div style="width: 150px; height: 150px; overflow: hidden; border: 1px solid black; position: relative;">
			<a style="width: 150px; height: 150px; text-align: center; background: red; display: table-cell; vertical-align: middle; ">
					<img style="" src="1.jpg" />
			</a>
		</div>

</div>

To działa (oba obrazki są wrównane), ale przycięcie ich do środka to już problem.

Postanowiłem zatemn pójść inną drogą:

Kod: Zaznacz cały

<a style="background: url('1.jpg') 50% 50% no-repeat; width: 100px; height: 100px; display: block;">

			</a>
		
		
			<a style="background: url('1.jpg') 50% 50% no-repeat;  width: 100px; height: 100px; display: block;">

			</a>

To też działa prawidłowo... i nawet jest rozwiązaniem. Tyle że tutaj mam kolejny problem. Chciałbym, by te obrazki był ubok siebie , a skoro daje im display: block, tak też się zachowują. I nyby jest rozwiązanie: float: left; ale to rodzi kolejny problem, bo chciałbym, aby finalnie cały blok obrazków byłwyśrodkowany na stronie (chodzi również o sytuację, gdy w 1 wierszu mam 4 obrazki, a w drugim trzy - by te trzy wyśrodkowały się)

Podsumowując... potrzebuję osiągnąć efekt podobny jak na:
http://marengo.net.pl/galeria.html
, tyle że z docinaniem obrazków.