How to best load an image from a URL using TWebBrowser when targeting multiple devices

I recently got a question from a customer on how to restrict the image size to the actual device screen dimensions when using TWebBrowser, so I thought I would create a blog post about it. Often times, images that are loaded from the web using an URL may be bigger than the form factor the app is being run on, causing the user to have to scroll to see the entire image. Below is a code snippet that shows you how to restrict the web image to fit perfectly to the form factor the app is being run on.

Read on to find the full snippet code!

[DownloadButton Product='RAD' Caption='Start a free trial of RAD Studio!']

In this snippet, I placed a TWebBrowser control onto my FireMonkey form and aligned it to the client. I then set up the following OnFormCreate event to load a web image into the browser control. I also restricted the image size to the screen dimensions of the device.

procedure TWebBrowserImageDemo.FormCreate(Sender: TObject);
const
  cHtmlString = '<img src=%s width=100%% height=100%%>';
var
  UrlOfImage: string;
begin
  UrlOfImage := 'https://static.pexels.com/photos/7345/pexels-photo.jpg';  //replace with your own URL
  WebBrowser1.LoadFromStrings(Format(cHtmlString, [UrlOfImage]), '');
end;
end.

As you can see in the screenshots below, regardless of the device dimensions, the image that is loaded from the URL is automatically resized to fit into the client aligned web browser control.