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.

Reza Aghaei · Accepted Answer · 2017-10-11T06:21:31.360

2

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.

edited Oct 11 '17 at 06:21

answered Oct 10 '17 at 13:12

Reza Aghaei

120,393
18
203
398

I tested it myself and it worked for me. What's the problem that you have when running above code? – Reza Aghaei Oct 11 '17 at 05:47
Updates the question to your means, is this good? Because the code above doesnt is giving me the same output. – Niels Oct 11 '17 at 06:00
Please don't update the question in a way that the answers seems to be nonsense. I rolled back the updates. If you read the answer and tested the solution and have any question, let me know the question :) – Reza Aghaei Oct 11 '17 at 06:02
I've only editted the question with the code you gave me, with the purpose of showing you the code, and that it does not work for me yet. If I use the documentCompleted event with the code you answered, and modify "webBrowser1" to "web"(my webbrowser name), it does not work. – Niels Oct 11 '17 at 06:06
I got what you mean, but in such cases it's better to don't touch the original question and just put some comments under the answer. Or sometimes if required, you can add an **Update** part to the question. Imagine if you receive 5 different answers, and if you want to put some updates in the question, what will happen for the original question. No one wants to read an answer such question and it will never be usefull for future readers. So let's keep the question and answers clean :) – Reza Aghaei Oct 11 '17 at 06:10
Anyway. I posted all steps of what I did to get the expected result which you can see it's screenshot. You can simply reproduce it. – Reza Aghaei Oct 11 '17 at 06:11
Oh sorry, kind of new to stackoverflow. Your answer seems to be right, but if I use the documentCompleted event with the code you answered, and modify "webBrowser1" to "web"(my webbrowser name), it does not work. I've debugged(showing messagebox in the method) and it seems to be the documentCompleted event is never executed somehow.. – Niels Oct 11 '17 at 06:15
You should assign event handler to the event. Just to make sure, follow the steps which I described in a clean environment. – Reza Aghaei Oct 11 '17 at 06:17
And by the way, don't miss the really important notes. If you setup `WebBrowser` control to [support showing modern content](https://stackoverflow.com/a/38514446/3110834) 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. – Reza Aghaei Oct 11 '17 at 06:19
Oke, i'll try. only difference we've got is that you create the webbrowser on the form, and I create it in the code. – Niels Oct 11 '17 at 06:21
For some images i get a "X"(not loading), u might know how this is possible? – Niels Oct 25 '17 at 06:01
I guess it doesn't have anything to do with those styles. It should be the image/src url. – Reza Aghaei Oct 25 '17 at 06:25
No, I've checked, without the documentCompleted function all images just appear.. with the function, 1/10 is a "X". – Niels Oct 25 '17 at 06:47
It would be great if you can post aquestion containing [MCVE] in a separate post :) – Reza Aghaei Oct 25 '17 at 06:57
i will do that and tag you in the comment. Give me a moment. – Niels Oct 25 '17 at 06:59

Problems having content in webbrowser scale automatically in Windows Form Application

1 Answers1

Linked