Question

我的主页有问题 - ＆gt; http://novustest.altervista.org/

地图在大屏幕上正确显示但我想让它更灵活，我希望如果我减少我的窗口浏览器，地图会自动调整大小。我怎么能这样做？

这是我的代码，非常简单。我只有一个html页面和2个js文件。

这是我的HTML页面：

!DOCTYPE html>
<style>
.italy{
    width: 100%;
    height: auto;
    overflow: hidden;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
</style>

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="myMap" class="italy">

        </div>
        <script src="raphael-min.js"></script>
        <script src="map.js"></script>
    </body>
</html>

这是jsfiddle的链接，但它不起作用......

https://jsfiddle.net/ye0b2qvp/1/

Answer 1

您的SVG内嵌了样式，使其成为1920x1080。

有关此事的更多说明，请参阅this article。

Answer 2

在svg标记中添加preserveAspectRatio属性，然后使用viewBox

进行播放

查看此处：

https://jsfiddle.net/fm024028/2/

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1500 600" ...

SVG和响应问题

2 个答案: