stretch small image to fit web viewer

December 6, 201114 yr

I'd like to be able to stretch a small image (50px X 50px) to fit a larger web viewer (200px X 200px), and to scale with the web viewer if it is set to auto-size when the window is enlarged. Is this possible?

Just to clarify, I don't want a small image saved as a larger image so it can be displayed at that size, basically I want to apply this css to the image in the web viewer:


img {

width:100%;

height:100%

}

December 6, 201114 yr

Author

This is a screenshot comparison of two webviewers. The one on the left is from SuperContainer with ?style=listview. Here is the code for the one on the right:


"data:text/html,<html>

<head>

<style type=\"text/css\">

html,body{border:0; margin:0; overflow:hidden; }

img{width:100%; height:100%}

</style>

</head>

<body>

<img src=\"http://www.360works.com/images/logo.gif\">

</body>

</html>"

I'd like to be able to make my SuperContainer web viewer act like the one on the right. The 'RawData' link comes to mind, but then I'd be missing out on the auto-resize feature of SC. If I used the 'RawData' link then a large image would be transferred to clients as-is. I want to use a parameter like ?style=listview&width=200&height=200 AND scale the image with css so that I account for images that are smaller than 200x200 and larger than 200x200.

December 10, 201114 yr

Author

I think I've figured this one out. I hadn't realized the RawData version of the url would accept parameters, so the code for the webviewer on the right (from my last post) will do what I want if I use a url that looks like this:


http://server/SuperContainer/RawData/path/to/file/?width=200&height=200





Once I got that far, I realized that I don't really want what I asked for. I want the image to stretch, but keep it's original aspect ratio. After lots of tinkering, I finally came up with the html/css/javascript that will do that, using the RawData url. Then I packaged the code as a custom function to make it easier to use...


// SuperContainerWebViewer( ~url ; ~width ; ~height )

// return html for web viewer to display image stretched to fit and centered



If( not isempty( ~url ) ;



"data:text/html,"

& "<html>

<head>

<script type='text/javascript'>

	var img;

	var body;

	var imgAspectRatio;

	function adjust(){

		if (!imgAspectRatio) return;

		var winW = body.clientWidth;

		var winH = body.clientHeight;

		var winAspectRatio = winW/winH;

		if (imgAspectRatio>winAspectRatio){

			img.style.width='100%';

			img.style.height='auto';

		} else {

			img.style.height='100%';

			img.style.width='auto';

		}

		body.style.display='block';

	}

	function onloadHandler(event) {

		img = event.srcElement;

		body = document.getElementsByTagName('body')[0];

		imgAspectRatio = img.clientWidth/img.clientHeight;

		/* fix Safari bug that causes image to not refresh after style is changed

		   hide everything before adjusting image the first time*/

		body.style.display='none';

		/* adjust image now */

		adjust();

		/* add window resize hook */

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

	}

</script>

<style type='text/css'>

body{

	border:0;

	margin:0;

	overflow:hidden;

}

table{

	width:100%;

	height:100%;

	padding:0;

	border:0;

	text-align:center;

	margin:0;

	border-collapse:collapse;

}

td{

	vertical-align:middle;

}

td, tr{

	padding:0;

}

img{

	border:0;

}

</style>

</head>

<body>

<table><tr><td>

<img onload='onloadHandler(event);' onerror=\"this.style.display='none';\" src='"

& Substitute( ~url ; "/SuperContainer/Files/" ; "/SuperContainer/RawData/" )

& If( not isempty( ~width ) ; "?width=" & ~width )

& If( not isempty( ~height ) ; "&height=" & ~height )

& "' />

</td></tr></table>

</body>

</html>"



)

December 11, 201114 yr

Thanks for that Dan...

December 11, 201114 yr

Author

Your welcome! I'm glad someone else is interested. This was one of the first things I wanted when I started using SuperContainer, so I was surprised it hadn't been discussed (from what I could see by doing searches on this forum).

Also, a note on compatibility... I tested this in FileMaker 11 on Windows and Mac, and on the iPhone.