Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Bootstrap skalowanie thumbów ale tylko w dół
Forum PHP.pl > Forum > Przedszkole
elmozaur
Witajcie.
Tym razem problem dotyczy dynamicznej galerii.
Za pomocą PHP generuje thumby o maksymalnej szerokości np 180px (wysokość-proporcjonalnie),
zakładam, że obrazki chcę wyświetlać np w 3 kolumnach (zawsze, niezależnie od tego, jaka jest szerokość kontenera całej galerii).
Dla uproszczenia napisałem skrypt generujący tabelkę do takiej postaci:
  1. <table style="width:100%">
  2. <tr>
  3. <td>obrazek</td><td>obrazek</td><td>obrazek</td>
  4. <tr>
  5. <tr>
  6. <td>obrazek</td><td>obrazek</td><td>obrazek</td>
  7. <tr>
  8. <tr>
  9. <td>obrazek</td><td>obrazek</td><td>obrazek</td>
  10. <tr>

Każdy obrazek jest w divie z klasą thumbnail, a każdy obrazek ma klase img-responsive.

Co chcę uzyskać:
jeśli ekran/okno przeglądarki będzie węższe niż suma szerokości wszystkich thumbów - to thumby przeskalują się na mniejsze.
Ale jeśli ekran/okno przeglądarki będą większe niż szerokość thumbów to thumby zachowają swoją maksymalną szerokość czyli wspomniane 180px.

Co uzyskałem:
galeria poprawnie wyświetla się jeśli ekran jest większy niż tabelka/suma szerokości wszystkich thumbów.
Udało mi się też uzyskać efekt skalowania ale niestety w dwie strony (powiekszanie i pomniejszanie)

ktoś miał podobny problem questionmark.gif?

pozdrawiam
Grzegorz
com
pytanie co jest złego w dynamicznym powiększaniu obrazka?
elmozaur
Niby nic ale 3 thumby o szerokosci 180px na ekranie 1920px wyglądają strasznie.
com
moment bo chyba czegoś nie rozumiem, chcesz mieć max 180 px, a dla ekranu 1920px to jak rozumiem za mało wiec czemu nie dasz większego max?
elmozaur
jaki max i gdzie ?
com
no napisałeś że mają "o maksymalnej szerokości np 180px" nie? to sie same nie rozciagną
elmozaur
Jest dokładnie tak jak mówisz.
Dzięki.
W moim przypadku zadziałało przy:
  1. style="width:100%;max-width:180px"
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.