równe wyświetlanie zdjęć

0

Witam,

Mam taki kod:
html:

    <div class="thumb">
        <img src="picture-1.jpg"  />
    </div>

i css:

div.thumb { border: 1px solid #000; width: 131px; height: 128px; 
    display: table-cell; vertical-align: middle; text-align: center; }

div.thumb img { border:0; height: 100%; }

Problem:
elementów div.thumb jest wiele na stronie, ponieważ jest to galeria zdjęć, chciałbym, aby wszystkie były ładnie ułożone obok siebie, dla takich przypadków:

  1. jeśli zdjęcie jest wysokie (height) i wąskie (width)
  2. jeśli zdjęcie jest niskie (height) i szerokie (width)

Przy takim kodzie, jw. udaje mi się rozwiązać problem tylko dla jednego punktu, jak rozwiązać go dla obu naraz ?

0

może ustaw stałą szerokość i wysokość thumb, i max wysokość/szerokość obrazków wewnątrz ?

0

Dać kazde zdjecie w ramce 1px o nieinwazyjnym kolorze i dopasowywac do srodka (albo beda marginesy polewej i prawej, albo u gory i dołu)

0

html:

    <div class="thumb">
        <img src="picture-1.jpg"  />
    </div>

i css:

div.thumb { border: 1px solid #000; width: 128px; height: 128px; 
                  text-align: center; }

div.thumb img { border:0; height: 128px;width: auto; margin: auto; }

Sprawdź czy takie rozwiązanie Cię zadowala.

0

nie bardzo, bo rezultat wygląda tak jak w załączniku
a chciałbym, aby oba obrazy były jednakowej wielkości - przy zachowaniu proporcji...

0

max-height:128px;
max-width:128px;

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0