Forum PHP.pl

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.

css na img:
width: 100%;
height: auto;

i ewentualnie pos:r na div i pos:a na img.

to niestety nie działa - tak już próbowałem. Zdjęcie dostosowuje się do szerokości ale nie do wysokości.

daj w <img> odpowiednią wysokość i szerokość względem diva

Aktualnie mam tak i to nie działa

[HTML] pobierz, plaintext 
<div class="category-photo">
                                <a href="./pl/lorem" >
                                    <img src="lorem.png" >
                                </a>
 
                            </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.category-photo {
position: relative;
background: #fff;
overflow: hidden;
height: 166px;
width: 175px;
}
 
img {
height: auto;
width: 100%;
top: 0px;
bottom: 0px;
left: 8px;
position: absolute;
}
 
[CSS] pobierz, plaintext 

Ten post edytował qbas-s 17.02.2014, 14:15:13

Masz to gdzies online?

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

Ten post edytował qbas-s 17.02.2014, 15:00:15

Miałem na myśli

[HTML] pobierz, plaintext 
<img src="lorem.png" height="166px" width="175px">
[HTML] pobierz, plaintext 

ale wtedy niektóre grafiki będą zniekształcone a nie o to mi chodzi

To nadaj mu jeden element (wys. lub szer.) a drugi się przeskaluje odpowiednio

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

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ł 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