Problems having content in webbrowser scale automatically in Windows Form Application

Question

I'm trying to create a program which scrolls through files located on my computer and displays the files. This is working for me so far but I'm getting content in actual size so the webbrowser adds a scrollbar(obviously). I want the content to scale automatically so it fits in the webbrowser without having to scroll.

Code:

 WebBrowser web = new WebBrowser();     
 System.Drawing.Rectangle workingRectangle = Screen.PrimaryScreen.WorkingArea;
 int heightWebcontrol = workingRectangle.Height / 100 * 85;
 int widthwebControl = workingRectangle.Width / 100 * 75;
 web.Size = new Size(widthwebControl, heightWebcontrol);
 web.Location = new Point(0, 0);
 web.Navigate(fileName);
 this.Controls.Add(web);

Large image in webbrowser, this is just 1/5th of the image:

So basicly, this large image, needs automatically to be scales so it fits the browser exactly.

Thanks guys.

Answer 1

As an option, you can handle DocumentCompleted event of the WebBrowser control and set the style of image based on the size.

For example:

1) Create a Windows Forms Project 2) Open Form1 in desgn mode and drop a WebBrowser control on it. 3) Double click on title-bar of form to handle Load event of the form and use following code:

private void Form1_Load(object sender, EventArgs e)
{
    this.webBrowser1.Navigate("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
}

4) Double click on WebBrowser control to handle its DocumentCompleed event and use following code:

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    webBrowser1.Document.Body.SetAttribute("scroll", "no");
    var img = webBrowser1.Document.GetElementsByTagName("img")
                 .Cast<HtmlElement>().FirstOrDefault();
    var w = img.ClientRectangle.Width;
    var h = img.ClientRectangle.Height;
    img.Style = string.Format("{0}: 100%", w > h ? "Width" : "Height");
}

You will see following result, while the original image size is 544x184:

Note 1

This is just an example of what you can do. You can make the decision more intelligent, for example check if the image size is less than the browser size, then you don't need to apply any scaling.

Note 2 - (This is my choice)

If you setup WebBrowser control to support showing modern content the better style for the image will be:

img.Style = "max-width:100%;max-height:100%";

This way, the image will be fit in the browser when it's larger than browser. Also it will not resize when the browser is large enough.