Display Images In The (Old) Web Browser Control While Preserving The Aspect Ratio

So I came across a recent question on UtterAccess

format size web browser control

I have a client that uses access 2019 which dosn't support the new edge web browser control, is there a way to format or resize the image or website in the old one. i have images on line they need to see and they don't fit the box size of the browser control like it does on the new edge control or is there a different want to view it? Images are stored on line i don't want to have to down load them to use them.

and figured I’d share something I had done many years ago.

So, I went digging, and well, couldn’t locate the project. 🙁

So, I figured I had done it once, I could simply do it again and I did.

The entire thing here is resizing the image isn’t complicated, but preserving the aspect ration is a little tricky. Normally, we would simply apply the desired height/width attributes to the image itself, but that will distort the image. I also didn’t want to get into downloading the images locally to be able to read their size properties (height/width) to then be able to calculate the proportional dimensions to respect the desired size, just not efficient and a waste of I/O operations… So we need another approach.

I should also quickly mention that the following is a solution for the old Web Browser control and there is simpler code to do the same thing in the Modern Web Browser control (maybe another article in the coming days/weeks).

Since we are talking about the Web Browser control, we are talking about HTML and Internet Explorer. Anything related to HTML equates to CSS. There are solutions that use JavaScript (JS) code to dynamically resize images, but there is no need for all of that, CSS is more than sufficient and then we don’t need to worry about JS being disabled.

The general idea is placing the image within a div element. We use the div to contain the image within a desired size and center it horizontally, and use the img element itself to center itself vertically. You can also get into control a border around the image, changing the background color and all sorts of other fancy things if you wish to.

Putting This All Together!

In my example, I have a form pulling URLs that house images (Control named ImgSrc). Whenever the user changes records I wanted my Web Browser (WebBrowser0) control to display the image from ImgSrc and resize it to fit centered within a 400px x 400px box.

Thus, it became a task of simply updating the HTML display whenever the Form’s Current event fired and the following was the resulting event procedure. Hopefully, it will help others.

Private Sub Form_Current()
On Error GoTo Error_Handler
    Dim sHTML                 As String

    If IsNull(Me.ImgSrc) = False Then
        'Display Image
        sHTML = "<!DOCTYPE html>" & vbCrLf & _
                "<html>" & vbCrLf & _
                "    <head>" & vbCrLf & _
                "        <style>" & vbCrLf & _
                "            .container {" & vbCrLf & _
                "                margin: 0px;" & vbCrLf & _
                "                width: 400px;" & vbCrLf & _
                "                height: 400px;" & vbCrLf & _
                "                line-height: 400px;" & vbCrLf & _
                "                text-align: center;" & vbCrLf & _
                "                border: none;" & vbCrLf & _
                "            }" & vbCrLf & _
                "            .resize {" & vbCrLf & _
                "                max-width:100%;" & vbCrLf & _
                "                max-height:100%;" & vbCrLf & _
                "                vertical-align: middle;" & vbCrLf & _
                "            }" & vbCrLf & _
                "        </style>" & vbCrLf & _
                "    </head>"
        sHTML = sHTML & "    <body>" & vbCrLf & _
                "        <div class=""container"">" & vbCrLf & _
                "            <img class=""resize"" src=""" & Me.ImgSrc & """>" & vbCrLf & _
                "        </div>" & vbCrLf & _
                "    </body>" & vbCrLf & _
                "</html>"
    Else
        'Display Blank
        'Me.WebBrowser0.ControlSource = "=""about:blank"""  'Not reliable anymore????
        sHTML = "<!DOCTYPE html>" & vbCrLf & _
                "<html>" & vbCrLf & _
                "    <body>" & vbCrLf & _
                "        <div class=""container"">" & vbCrLf & _
                "            <img class=""resize"" src="""">" & vbCrLf & _
                "        </div>" & vbCrLf & _
                "    </body>" & vbCrLf & _
                "</html>"
    End If

    'Debug.Print sHTML 'For Troubleshooting
    With Me.WebBrowser0.Object.Document
        .Open
        .Write sHTML
        .Close
    End With
    
Error_Handler_Exit:
    On Error Resume Next
    Exit Sub
 
Error_Handler:
    MsgBox "The following error has occurred" & vbCrLf & vbCrLf & _
           "Error Source: Form_Current" & vbCrLf & _
           "Error Number: " & Err.Number & vbCrLf & _
           "Error Description: " & Err.Description & _
           Switch(Erl = 0, "", Erl <> 0, vbCrLf & "Line No: " & Erl) _
           , vbOKOnly + vbCritical, "An Error has Occurred!"
    Resume Error_Handler_Exit
End Sub

Important Note

The size of the image/box is controlled by simply altering the

width: 400px;
height: 400px;
line-height: 400px;

in the CSS of the container class.

I know that a few other ‘solutions’ were provided in the original thread, none (as of 2023-12-29) solve the question actually asked, even the ones people said worked. I’m not going to go into a great debate here, but if you actually test them properly, one by one, using multiple images of varying dimensions you will quickly understand why I state this! I wish there was a simpler solution, but as it stands right now, this is the way to approach the problem asked in a reliable manner.