Jump to content

stretch small image to fit web viewer

dansmith65

By dansmith65
in SuperContainer by 360 Works

 Share

This topic is 4544 days old. Please don't post here. Open a new topic instead.

Recommended Posts

dansmith65 Experienced

dansmith65

Posted
Posted

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%

}

Link to comment
Share on other sites
dansmith65 Experienced

dansmith65

Posted
  • Author
Posted

fhsJZ.png

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.

Link to comment
Share on other sites
dansmith65 Experienced

dansmith65

Posted
  • Author
Posted

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>"



)

Link to comment
Share on other sites
dansmith65 Experienced

dansmith65

Posted
  • Author
Posted

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.

Link to comment
Share on other sites

This topic is 4544 days old. Please don't post here. Open a new topic instead.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.

  I accept