如何使 svg 图像大于父 div？答案

【问题标题】：How to make svg image larger than parent div?如何使 svg 图像大于父 div？
【发布时间】：2021-06-27 09:38:24
【问题描述】：

我在 div 包装器中有一个名为 profile-pic 的父 div。在父 div 中驻留一个 svg 图像。我需要 svg 图像大于父 div，因此 svg 图像（铁丝网）看起来像围绕父 div 的边框。我知道如果我调整子元素（铁丝网）的大小，它不会有好处。我也明白调整父元素的大小不会有什么好处，因为子元素会随着父 div 大小的最大宽度而增长和缩小。如果我尝试在图像上设置大于父元素的宽度和高度，则会中断。这是我尝试过的。 codepen

    <main>
        <div class="wrapper">
            <div class="profile-pic">
                <img src="src/barbed-wire-circle.svg" alt="circle">
            </div>
        </div>
    </main>



body {
    width: 90%;
    margin: auto;
    text-align: center;
    padding: 20px 0px;
    background: #fffcd8;
}

main {
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
}

main img {
    max-width: 100%;
    animation-name: rotate;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
    background-size: auto 50%;
    background-position: center;
}

@keyframes rotate {
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

.wrapper {
    width: 700px;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: none;
}

.profile-pic {
    width: 500px;
    height: 500px;
    background-color: white;
    border-radius: 50%;
    background-size: auto 50%;
}

【问题讨论】：

对铁丝网使用伪前元素，绝对相对于圆圈定位，但更大可能有用，因为铁丝网是装饰性的，而不是 HTML 的自然部分。

标签： css

【解决方案1】：

我意识到我需要添加另一个名为 inner-profile 的具有绝对位置的 div。然后在父 div profile-pic 上，显示为带有 justify-content 和 align-items center 的 flex。更新codepen

    <main>
        <div class="wrapper">
            <div class="profile-pic">
                <div class="inner-profile"></div>
                <img class="" src="src/barbed-wire-circle.svg" alt="circle">
            </div>
        </div>
    </main>


.inner-profile {
    position: absolute;
    width: 470px;
    height: 470px;
    background-color: thistle;
    border-radius: 50%;

}

.profile-pic {
    width: 500px;
    height: 500px;
    background-color: none;
    border-radius: 50%;
    background-size: auto 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

【讨论】：