为什么我的 SVG 的缩放大小与父 DIV 不同？答案

【问题标题】：Why is my SVG not scaling same size as parent DIV?为什么我的 SVG 的缩放大小与父 DIV 不同？
【发布时间】：2020-07-21 16:56:54
【问题描述】：

我希望我的 svg 图像与父 div 的大小完全相同，我也尝试将其作为背景图像，但它不起作用。

This is the example of a screnshots

      <div className='contact'>
        <div  className='contact-splash'>
          <img src='path/astro.svg' alt=""/>
      </div>

.contact {
    width: 100%;
    height: auto;
    margin-top: 7%;
    font-family: Oswald;
}

.contact-splash {
    height: 80vh;
    width: 100%;

    img {
        max-height: 80vh;
        max-width: 100%; 
        width: auto; 
        height: auto; 
        position: absolute; 
        margin: auto;
    }

}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1400px" height="1100px" viewBox="0 0 1400 1100" enable-background="new 0 0 1400 1100" xml:space="preserve">  <image id="image0" width="1400" height="1100" x="0" y="0"

【问题讨论】：

你能提供svg吗？

标签： css svg

【解决方案1】：

如果您希望图像标签与 Div 联系人大小相同，只需指定 height:100%; width:100%; 内部图像样式而不是 max-height: 80vh; max-width: 100%;

【讨论】：