使包含 SVG 的对象适合 DIV

Question

我正在尝试使对象适合 div。我尝试了适合图像的解决方案，但在这种情况下它们不起作用。有什么想法吗？

HTML：

<div class="image">
  <object id="tangramObj" class="tangram" data="" type="image/svg+xml">
    <svg version="1.1"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:ev="http://www.w3.org/2001/xml-events"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         width="606" height="202"
         baseProfile="full">...</svg>
  </object>
</div>

CSS：

.image {
  position: fixed;
  top: 20%;
  left: 20%;
  right: 50%;
  bottom: 0;
}

.tangram {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

谢谢！

Answer 1

如果我理解正确您的问题，您在 SVG 中定义 width="606" height="202" 并在 CSS 中定义 100%。

试试

    <div class="image">
    <object id="tangramObj" class="tangram" data="" type="image/svg+xml">
        <svg version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:ev="http://www.w3.org/2001/xml-events"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            baseProfile="full">
        </svg>
    </object>
</div>