How to make svg image larger than parent div? - css

Question

I have a parent div called profile-pic in a div wrapper. In the parent div resides an svg image. I need the svg image to be larger than the parent div so the svg image (barbed wire) looks like a border surrounding the parent div. I understand if I resize the child element (barbed wire) it will do no good. I also understand that resizing the parent element will do no good since the child element grows and shrinks with max-width of parent div size. If I try to set a width and height on the image bigger than the parent element it breaks. Here is what I have tried. 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%;
}

Answer 1

I realized I needed to add another div called inner-profile with an absolute position. Then on the parent div profile-pic, display as flex with justify-content and align-items center. updated 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;
}