placeholder.svg

<svg xmlns="http://www.w3.org/2000/svg" style="background:lightgrey">
	<text x="50%" y="50%" text-anchor="middle" style="font-family: sans-serif" >
		<tspan id="asp" x="50%" dy="-20">Aspect-ratio</tspan>
		<tspan id="dim" x="50%" dy="20">Dimensions</tspan>
	</text>
	<script type="text/ecmascript">
		<![CDATA[
		  	calc();

			window.onresize = function(){
				calc();
			}

			function getAspectRatio(w, h){
				var rem;
				var newW = w;
				var newH = h;

				while (h != 0){
					rem = w % h;
					w = h;
					h = rem;
				}
				return newW / w + ":" + newH / w;
			}

			function calc(){
				var rect = document.getElementsByTagName("svg")[0].getBoundingClientRect();
				document.getElementById("dim").innerHTML = rect.width +"px x "+ rect.height +"px";
				document.getElementById("asp").innerHTML = getAspectRatio(rect.width, rect.height)
			}
		]]>
	</script>
</svg>