如何在 excel WebBrowser 控件上调整图像大小答案

【问题标题】：How to fit image size on excel WebBrowser control如何在 excel WebBrowser 控件上调整图像大小
【发布时间】：2020-09-14 03:16:56
【问题描述】：

我有一个名为 WebBrowser1 的 WebBrowser 控件。

我使用此代码通过其 URL 显示图像。

WebBrowser1.Navigate ("https://cdn2.iconfinder.com/data/icons/modern-latin-alphabet-lowercase-and-uppercase-lett/154/alphabet-uppercase-letter-z-512.png")

效果很好，但图像比 WebBrowser 控件大。

所以我需要调整图像大小以适应 WebBrowser 控件的大小。

【问题讨论】：

标签： html vba excel

【解决方案1】：

试试这个代码来适应图像宽度：

Sub Test()
    
    UserForm1.Show
    UserForm1.WebBrowser1.Navigate "about:blank"
    UserForm1.WebBrowser1.Document.Write "<img style=""width:100%;"" src=""https://cdn2.iconfinder.com/data/icons/modern-latin-alphabet-lowercase-and-uppercase-lett/154/alphabet-uppercase-letter-z-512.png"">"
    
End Sub

现在您可能想要同时调整图像的高度和宽度，毕竟，所有现代浏览器都支持 CSS object-fit，幸运的是除了 IE ;) 因此，要使图像适应视口并保持纵横比，有必要找到高度和宽度的最小比例，并通过将其设置为 100% 来适应该尺寸的图像。它可以通过嵌入文档的 CSS 或 javascript 来完成，但出于 VBA 的目的，下面的代码工作得很好。还添加了 WebBrowser 控件初始化和用于显示已定义图像的单独过程以提高鲁棒性。

假设有UserForm1，ShowModal 设置为False，带有WebBrowser 控件。将以下代码放在 UserForm 模块中：

Private Sub UserForm_Initialize()
    
    With Me.WebBrowser1
        .Navigate "about:blank"
        .Document.Write "<body style='background-color: buttonface; overflow: hidden;'></body>"
    End With
    
End Sub

Public Sub displayImage(src)
    
    With Me.WebBrowser1
        .Document.Close
        .Document.Write "<body id='body' style='background-color: buttonface; overflow: hidden; margin: 0; text-align: center;'><img id='img' src='" & src & "'></body>"
        Dim img
        Set img = .Document.getElementById("img")
        Dim body
        Set body = .Document.getElementById("body")
        If body.ClientHeight / img.ClientHeight < body.ClientWidth / img.ClientWidth Then
            img.Style.Height = "100%"
        Else
            img.Style.Width = "100%"
        End If
    End With
    
End Sub

将Test1放在标准模块中并调用它来显示图像：

Sub Test1()
    
    UserForm1.Show
    UserForm1.displayImage "https://i.stack.imgur.com/B8imb.gif"
    
End Sub

您也可以在代码中嵌入 base64 编码图像（使用任何在线 Base64 图像编码器），请参阅Test2 示例：

Sub Test2()
    
    UserForm1.Show
    UserForm1.displayImage _
        "data:image/png;base64," & _
        "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAACXBIWXMAAA7DAAAOwwHHb6hkAAADoklE" & _
        "QVR4nO3dwW2DQBBAUYjSaWSKikytTgMcgmS8K/57BaA5fc2BgXV5PF8LkPQ1egBgHAGAMAGAMAGAMAGA" & _
        "MAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGA" & _
        "MAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAMAGAsO/RA/AZr9+f0SPcyrrto0d4CxsAhAkA" & _
        "hAkAhAkAhAkAhAkAhAkAhAkAhAkAhAkAhAkAhLkF4NDV77qfvU2YbZ67sAFAmABAmABAmABAmABAmABA" & _
        "mABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmABAmP8CcGi27+TP" & _
        "Ns9d2AAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgTAAgzC1AxLrto0f4KLcD/2MDgDABgDABgDAB" & _
        "gDABgDABgDABgDABgDABgDABgDABgLDb3AJ49/vearcMn2IDgDABgDABgDABgDABgDABgDABgDABgDAB" & _
        "gDABgDABgLDb3AKcdfW75WdvE8zDCDYACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMA" & _
        "CBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACMv+F2C279KbhxFsABAmABAmABAmABAmABAmABAm" & _
        "ABAmABAmABAmABAmABCWvQVYt/3S5599l36meWaahWvZACBMACBMACBMACBMACBMACBMACBMACBMACBM" & _
        "ACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACAs+1+A2b5NP9M8M83CtWwAECYA" & _
        "ECYAECYAECYAECYAECYAECYAECYAECYAECYAEJa9BZjNuu2XPt/7/RyxAUCYAECYAECYAECYAECYAECY" & _
        "AECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECYAECY" & _
        "AECYAECYAECYAECYAECYAECYAECYAECYAEDYujyer9FDAGPYACBMACBMACBMACBMACBMACBMACBMACBM" & _
        "ACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBMACBM" & _
        "ACBMACBMACBMACBMACBMACBMACBMACBMACDsD0NPOfMjSKzzAAAAAElFTkSuQmCC"
    
End Sub

我发现删除 WebBrowser 控件下陷边框的最简单方法是...只需将它们移到 UserForm 边框之外“裁剪”（通过设置 Top 和 Left 为负数，并且 Height 和 Width 大于 UserForm），或者做同样的事情在 Frame 控件中，SpecialEffect 设置为 0 并为空 Caption。

【讨论】：

非常有帮助。我很惊讶它没有获得更多的支持。