Hallo,
ich überleg grad nach einem sinnvollen Workflow.... und steh vorm Berg (wahrscheinlich ist die Lösung ganz simpel 
also es sollen diverse Bildchen (siehe Screenshot - so soll es aussehen) mit einer weißen Rundung in der rechten oberen Ecke überlagert werden.
An und für sich kein Problem... nur die richtige dynamische Skalierung für unterschiedliche Endgeräte bereitet mir einen rauchenden Kopf...
die Größe der Bilder soll gleich bleiben und eben nur weniger werden für mobile Endgeräte.
Die weiße Rundung (ein png mit dieser Form) soll nicht einfach prozentual verkleinert werden - ... sondern eigentlich nur die Balken (links und unten) sollen sich verkürzen -
diese weiße Rundung soll auch an der oberen rechten Ecke fixiert bleiben.(ist noch nicht umgesetzt) ebenso sollen die Bildchen nicht unter der Rundung rausgucken (muß ich auch noch machen - wahrscheinlich mit max- und min-width?)
hmm... jemand ne Idee.. vielleicht auch nen ganz anderen Workflow?
Danke für Denkanstöße und Tipps 
html-seminar.de/woltlab/attachment/2177/
HTML
<body>
<header>
<div id="rectangle1">
<img id="test" title="" src="images/whitecurveai2.png" alt="image" class="responsive"></a>
</div>
<div id="rectangle2">
<img src="images/test1.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test3.png" alt="image"></a>
<img src="images/test4.png" alt="image"></a>
<img src="images/test5.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test1.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test3.png" alt="image"></a>
<img src="images/test4.png" alt="image"></a>
<img src="images/test5.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test1.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test3.png" alt="image"></a>
<img src="images/test4.png" alt="image"></a>
<img src="images/test5.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test1.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test3.png" alt="image"></a>
<img src="images/test4.png" alt="image"></a>
<img src="images/test5.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test1.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test3.png" alt="image"></a>
<img src="images/test4.png" alt="image"></a>
<img src="images/test5.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test1.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
<img src="images/test3.png" alt="image"></a>
<img src="images/test4.png" alt="image"></a>
<img src="images/test5.png" alt="image"></a>
<img src="images/test2.png" alt="image"></a>
</div>
<div id="rectangle3">
</div>
</header>
</body>
CSS
body {
background-color: green;
}
#crectangle1 {
height: 200px;
background: blue;
z-index: 1;
position: fixed;
}
#rectangle2 {
max-width: 1920px;
}
#rectangle3 {
height: 500px;
background: grey;
z-index: 50;
position: fixed;
float: right;
}
#test {
z-index: 100;
position: fixed;
width: auto%;
height: auto;
float: right;
}