How to scale the content of the Browser Widget

[Keith Clarke]

An idea extending Ralph's suggestion to use html, along with styling to do the heavy lifting rather than JavaScript. A div with a background image might do the trick...

<h1>Image title</h1>
<div style="width: 100%; height: calc(100vh - 2rem; background: url("url") no repeat cover; "></div> 

...where:
... 'vh' is viewport height units (as percentage) and '2rem' leaves some space for the image title, (expressed as font size relative to that in the html root element).

...background provides for background images, and size as 'cover' fill the containing div (with some scaling in one dimension that affects aspect ratio) - so use 'contain' if you want the image to be as large as possible with its aspect ratio left intact. See help for this background shorthand styling examples and related information here https://www.w3schools.com/css/css_background_shorthand.asp

HTH
Keith 

> On 13 Jul 2021, at 22:24, Ralph DiMola via use-livecode <use-livecode at lists.runrev.com> wrote:
> 
> One way...
> Create a local html template and replace an href place holder in the
> template to the url of the web server image.
> Then load the template page into the browser widget and let html do the
> resizing heavy lifting. This will not break cors.
> 
> Ralph DiMola
> IT Director
> Evergreen Information Services
> rdimola at evergreeninfo.net
> 
> -----Original Message-----
> From: use-livecode [mailto:use-livecode-bounces at lists.runrev.com] On Behalf
> Of matthias rebbe via use-livecode
> Sent: Tuesday, July 13, 2021 5:00 PM
> To: How to use LiveCode
> Cc: matthias_livecode_150811 at m-r-d.de
> Subject: How to scale the content of the Browser Widget
> 
> Hi,
> 
> i need to display jpeg images in the browser widget. The images are stored
> on a webserver and i  have no control about the size of the images. 
> What i can say is that the images are larger than the browser widget area.
> Is there a way to scale the images so they are fully visible in the browser
> widget? 
> I do not want to temporarily store them on hard disk, resize them and then
> display.
> I need something like an "on the fly" scaling.  
> I am wondering if this might be possible with Javascript? Unfortunately i am
> not very used Javascript.
> 
> Does anyone know if this is possible?
> 
> Regards,
> 
> Matthias
> 
> 
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription
> preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
> 
> 
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode