index.html
Gehe zu Unterverzeichnis "Simple Crop"

Width: 695px. Height: mind. 700 Pixel.

Gehe zu 520.html   Gehe zu 700.html   Gehe zu 820.html

Das lief GUT im FF u. IE 10, aber die INDEX.html wird nicht erreicht.
var BODY = document.getElementById('BODY');
setInterval(function(){
if(window.matchMedia("(max-width: 500px)").matches){
location.href = "520.html"; }
if(window.matchMedia("(min-width: 500px)").matches){
location.href = "700.html"; }
if(window.matchMedia("(min-width: 900px)").matches){
location.href = "820.html"; }
},100000);

Geht auch mit HEIGHT. Die Funktion setInterval(function() kann entfallen. Jetzt noch Problem mit INDEX.html-Aufruf beseitigen. Folgende Variante ist z. B. möglich:
if(window.matchMedia("(max-height: 700px)").matches){ location.href = "520.html"; } if(window.matchMedia("(min-height: 820px)").matches){ location.href = "820.html"; }
Zwischen height: 700px und height: 820px wird die INDEX.html gezeigt. Hier liegt also eine Variante mit 3 Bildgrössen vor.

DIV id="unten"   HTML 5 - OK, CSS 3 - OK.   Kontrolle: http://bradfrost.com/demo/ish/