Witam wszystkich mam taki mały problem i nie wiem jak go rozwiązać. Mam na swojej stronie isadzony obrazek w formie poziomej osadzony w DIV-ie

[HTML] pobierz, plaintext 
<div id="obrazek"><img src="images/foto1.png" style="width: 100%; height: 100%;"></div>
[HTML] pobierz, plaintext 

i teraz mój problem chciał bym aby mniejszej rozdzielczości ekranu ok 400 px (smartfon) ten obrazek został podmieniony na inny który jest w wersji pionowej.

[HTML] pobierz, plaintext 
<div id="obrazek"><img src="images/foto2.png" style="width: 100%; height: 100%;"></div>
[HTML] pobierz, plaintext 

Nadmienie że cały czas te obrazki musza się skalować aby zachować pełna responsywność.
Z góry dziękuję za pomoc.

Patrzyłeś może na picture i jego polyfille? https://github.com/scottjehl/picturefill Co prawda lekko przekombinowane, ale picture jest już standardem jeśli chodzi o responsywne obrazki.

Sprawdzę czy mi się przyda oraz czy bedzie się sprawdzać na stronie. Dzięki za podpowiedź