【问题标题】:SVG and Responsive issueSVG 和响应式问题
【发布时间】:2015-07-02 05:12:02
【问题描述】:

我的主页有问题 -> 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/

【问题讨论】:

    标签: javascript css svg responsive-design raphael


    【解决方案1】:

    您的 SVG 中嵌入了样式,使其成为 1920x1080。

    有关此问题的更多说明,请参阅this article

    【讨论】:

      【解决方案2】:

      在 svg 标签中添加preserveAspectRatio 属性并使用viewBox

      在这里查看:

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

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

      【讨论】:

      猜你喜欢
      • 2016-06-25
      • 2015-12-22
      • 2013-04-15
      • 2014-11-14
      • 1970-01-01
      • 1970-01-01
      • 2015-08-17
      • 1970-01-01
      • 2019-05-06
      相关资源
      最近更新 更多