równe wyświetlanie zdjęć

Odpowiedz Nowy wątek
2011-10-20 00:59
biolog
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 ?

Pozostało 580 znaków

2011-10-20 13:33
jam
0

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

Pozostało 580 znaków

2011-10-20 14:10
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)


homepage
<font size="1">Jeśli starasz się, by Twój system był idiotoodporny, zawsze znajdzie się idiota, który jest bardziej pomysłowy od Ciebie.</span>

Pozostało 580 znaków

2011-10-20 16:05
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.


edytowany 1x, ostatnio: corey, 2011-10-20 16:06

Pozostało 580 znaków

2011-10-20 17:20
biolog
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...

  • test.JPG (0.01 MB) - ściągnięć: 108

Pozostało 580 znaków

2011-10-20 22:02
jam
0

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

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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