Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dopasowanie img do div
Forum PHP.pl > Forum > Po stronie przeglądarki
qbas-s
Posiadam div o wymiarach 166x175px i overflow hidden. Do takiego każdego takiego elementu wczytywane jest jedno zdjęcie. Problem w tym, że zdjęcia są różnych rozmiarów np 800x600, 200x600, 600x200 itp. Klient sobie zażyczył aby przy tego typu fotach każde zdjęcie było w 100% widoczne w elemencie div. Wolałbym to jakoś np w jquery zrobić a nie np w php bo skrypt na którym pracuje nie jest mój i nie chce mi się szerzej zagłębiać w kod.
fizzlebubble
css na img:
width: 100%;
height: auto;

i ewentualnie pos:r na div i pos:a na img.
qbas-s
to niestety nie działa - tak już próbowałem. Zdjęcie dostosowuje się do szerokości ale nie do wysokości.
Turson
daj w <img> odpowiednią wysokość i szerokość względem diva
qbas-s
Aktualnie mam tak i to nie działa

  1. <div class="category-photo">
  2. <a href="./pl/lorem" >
  3. <img src="lorem.png" >
  4. </a>
  5.  
  6. </div>


  1. .category-photo {
  2. position: relative;
  3. background: #fff;
  4. overflow: hidden;
  5. height: 166px;
  6. width: 175px;
  7. }
  8.  
  9. img {
  10. height: auto;
  11. width: 100%;
  12. top: 0px;
  13. bottom: 0px;
  14. left: 8px;
  15. position: absolute;
  16. }
  17.  
fizzlebubble
Masz to gdzies online?
qbas-s
niestety nie mogę tego pokazać online ale sytuacja wygląda tak jak tu
Edit(aktualizacja linka)http://jsfiddle.net/qbasss/spUEH/1/
Chodzi o to, żeby grafika w 100% była widoczna w div. Na stronie docelowej wszystkie grafiki są na białym tle
Turson
Miałem na myśli
  1. <img src="lorem.png" height="166px" width="175px">
qbas-s
ale wtedy niektóre grafiki będą zniekształcone a nie o to mi chodzi
Turson
To nadaj mu jeden element (wys. lub szer.) a drugi się przeskaluje odpowiednio
qbas-s
ale div mam overflow hidden i wszystko co będzie poza div zostanie ucięte a jak napisałem już wyżej chodzi mi o to aby cała grafiki w 100% była widoczna w tym div'ie
maniutek08
Się zadecyduj : albo 100% diva i grafika ucięta, albo 100% img na width lub height i białe pola.. albo albo.. nie ma tu inne drogi.. no chyba że chcesz mieć rozciągnięte klopsy ale to rozwiązanie już podano.. mam lepszy pomysł wink.gif spróbuj to narysować i nam przedstawić o co Ci dokładnie chodzi.. myślę że jak spróbujesz nam to zobrazować, to automatycznie wybierzesz jedną z podanych metod wink.gif
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.