Question

我有一个SVG图像，我想完全适合视口而不向任何一个方向滚动。图像是动态创建的，因此可能是宽，短，正方形或高而窄。

我已经让它调整大小所以它始终是视口的宽度，但我不知道是否有一种HTML / CSS唯一的方法来确保它不会滚动垂直。

这是我的代码，使图像水平响应：

<div class="container">
  <div id="paper"
    style="padding-bottom: 111.981%;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      role="img"
      viewBox="0 0 792.0135606084274 886.9085000000002"
      preserveAspectRatio="xMinYMin meet">
      <title>My Image</title>
      <path>etc...</path>
    </svg>
  </div>
</div>

.paper {
    display: inline-block; 
    position: relative; 
    width: 100%; 
    vertical-align: middle; 
    overflow: hidden;
    max-height: calc(100vh - 100px); // added in edit
}

.paper svg {
    overflow: hidden; 
    position: absolute; 
    display: inline-block; 
    top: 0px; 
    left: 0px;
    max-height: calc(100vh - 100px); // added in edit
}

（SVG完成时会计算padding-bottom和viewBox。）

我能想到的唯一解决方案是在JS中处理resize事件，并在max-width container上设置div。不过，我喜欢CSS解决方案。

编辑：我添加了max-height，这让我非常接近。唯一的问题是＆＃34;纸张的总大小＆＃34;元素没有改变，所以它下面的一切都被推倒了。如果我手动更改纸张的padding-bottom样式，我可以修复它，所以现在我想弄清楚如何设置它。

编辑2：还有一个问题是，当max-height元素启动时，SVG的视觉宽度会发生变化，但它不会反映在DOM中。这意味着将此类内容添加到paper：background: green; border: 1px solid black;不再有效，paper不再水平居中。

编辑3：我想要实现的是放置一个动态生成的SVG图像，使其适合特定的DIV，而不需要滚动条。它应该尽可能大。例如，如果您转到图像预览应用程序，通常会有一个菜单设置＆＃34;缩放以适应＆＃34;。如果图像太宽或太高，它会缩小，如果有额外的空间，它会被展开。

如何在浏览器窗口中水平和垂直放置SVG图像？

0 个答案: