调整带有嵌入式图像的弹出气球的大小以适合Google Earth上KML文件中的窗口大小

Question

给出的是一个KML文件，带有单个地标和可以在GoogleEarth中打开的单击弹出式气球。此气球包含的图像大于平均屏幕上的图像。我希望弹出气球的大小可以动态调整为（几乎）利用全屏，而与物理屏幕的大小或分辨率无关。在此弹出窗口内，应相应缩放图像以使其完全可见而无需滚动条。

当前情况：

期望的情况：

这在某种程度上可行吗？我无法弄清楚任何HTML / CSS组合是否可以使其正常工作。

这是上部屏幕截图的KML源：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document>
        <name>Two large images stacked vertically and adjusted to screen size in popup balloon</name>
        <Style id="abc123">
            <IconStyle>
                <color>000000</color>
                <scale>0.50</scale>
                <Icon>
                    <href>http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png</href>
                </Icon>
            </IconStyle>
            <LabelStyle>
                <scale>0</scale>
            </LabelStyle>
        </Style>
        <Placemark>
            <name>Some placemark</name>
            <styleUrl>#abc123</styleUrl>
            <Point>
                <altitudeMode>clampToGround</altitudeMode>
                <coordinates>4.732276,52.604905</coordinates>
            </Point>
            <description><![CDATA[<img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" />]]></description>
        </Placemark>
    </Document>
</kml>

Answer 1

地标中的描述可以具有HTML，因此一种解决方案是通过在<img>标签中设置height和width属性，而另一种方法是添加具有宽度的<div>标签来控制宽度。

下面的屏幕截图显示了设置自定义宽度时弹出窗口中的图像。

[KML示例：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
    <Document>
        <name>Two large images stacked vertically and adjusted to screen size in popup balloon</name>
        <Style id="abc123">
            <IconStyle>
                <color>000000</color>
                <scale>0.50</scale>
                <Icon>
                    <href>http://maps.google.com/mapfiles/kml/shapes/shaded_dot.png</href>
                </Icon>
            </IconStyle>
            <LabelStyle>
                <scale>0</scale>
            </LabelStyle>
        </Style>
        <Placemark>
            <name>Some placemark</name>
            <styleUrl>#abc123</styleUrl>
            <Point>
                <altitudeMode>clampToGround</altitudeMode>
                <coordinates>4.732276,52.604905</coordinates>
            </Point>
            <description><![CDATA[
                <img width="600" height="400"
                   src="https://www.w3schools.com/w3css/img_lights.jpg"/>
                ]]>
            </description>
        </Placemark>
    </Document>
</kml>

第二种方法是在宽度上加上<div>标签宽度。

<description><![CDATA[
<div style="width:624px;">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
</div>
]]></description>

Answer 2

如另一个答案所示，您可以使用基本的HTML工具调整气球中图像的大小。您也可以使用javascript动态地调整图像大小。但是您似乎在问是否可以根据屏幕大小自定义图像和气球大小，但是不幸的是，我不知道气球中的HTML和Javascript知道当前屏幕大小是什么，所以我不要以为可以动态扩展图像以填满整个屏幕。

[一种可能的替代方法可能是在气球中有一个较小的（缩略图？）图像链接到全尺寸图像。这样，用户可以单击图像并在Earth的内部浏览器窗口中打开它，该窗口会自动调整大小到屏幕。