Skalowanie zdjęć

Witam !
Zdjęcia, które posiadam w dużej rozdzielczości, musiałem sformatować do konkretnych rozmiarów div-a na stronie. Umieściłem je jako background div-a, aby je wycentrować i aby zachować ich prawidłowe proporcje. Stworzyłem na tą potrzebę następującą klasę w CSS:

      height: 100px;
		width:125px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

Wszystko wygląda ok dopóki nie odpalę przeglądarki IE :) Poniżej umieszczam screeny, aby wyjaśnić na czym polega różnica.
http://prntscr.com/23tq2g <-- wersja OK
http://prntscr.com/23tq9a <-- wersja IE tak jakby smuży, w dużej rozdzielce też wyglądają gorzej niż w pozostałych przeglądarkach
Pracuję zdalnie, a gdy wejdę na stronę zewnętrznie na IE bacground-size:contain, jakby w ogóle nie działał. IE jest w innej wersji
http://prntscr.com/23tqdr <-- przykład

Czy istnieje jakieś inne rozwiązanie aby umieścić zdjęcia w div-a i nie stracić ich proporcji(w sensie żeby nie były poszerzone ani wydłużone) lub co mogę zmienić aby było ok?

Pozdrawiam Nieznasz

Jakakolwiek zmiana rozdzielczości obrazków poprzez CSS (czy to height czy backgroud-size) zawsze powoduje masę problemów i jest po prostu bez sensu. Wygeneruj sobie miniaturki w potrzebnym rozmiarze jako pliki z miniaturką i tyle. Każda przeglądarka ma swój algorytm skalowania, więc efekty nie są zawsze takie same, a IE w wersji niższej niż 9 (użytkownicy XP NIE MOGĄ zaktualizować IE do wersji nowszej niż 8) nie wspiera background-size w ogóle.

Wygeneruj sobie miniaturki w konkretnym rozmiarze, masz na myśli zapisanie plików zdjęć w takim rozmiarze w jakim je umieszczę na stronie? Jeśli dobrze się rozumiemy to to będzie trochę niepraktyczne ponieważ dostaję katalog z setkami zdjęć od Firmy, dla której piszę sklep. Pliki te są w dużych rozmiarach i sam muszę sobie poradzić z ich skalowaniem. Ehhh

Przecież można sobie użyć jakiejś biblioteki do skalowania, nie?
Mamy 2013 rok, myślisz, że skoro już latamy w kosmos, robimy operacje oczu, klonujemy zwierzęta, a na smartfonie można grać w GTA - to wciąż nie można z automatu przeskalować zdjęć?

Nie możesz napisać skryptu, który przeskaluje te pliki za Ciebie? W jakimś bashu, czy Pythonie (PIL) mógłbyś to bardzo łatwo osiągnąć. Możesz się nawet wesprzeć ImageMagick'iem, masz komendę, która robi to czego potrzebujesz:
convert MenuStory.png -resize 100x125 -background white -gravity center -extent 100x125 output.png

nieznasz napisał(a):

masz na myśli zapisanie plików zdjęć w takim rozmiarze w jakim je umieszczę na stronie? Jeśli dobrze się rozumiemy to to będzie trochę niepraktyczne

Najbardziej niepraktyczne i lamerskie rozwiązanie to to co robisz właśnie teraz. Ile razy widziałem na stronach miniaturki robione po stronie przeglądarki, a nie serwera. Żeby dla obrazka wyświetlanego w rozdzielczości 100x125 px ładować 500kB-1MB plik? To straszne marnotrawstwo i w taki sposób wygenerujesz znacznie większe obciążenie serwera niż przy zdrowym podejściu.

Dopiero zaczynam bawić się w phpie,html,css dlatego wybaczcie braki :)
Pozdrawiam serdecznie i dzięki