I created a simple demo featuring a square image with rounded corners to give it a circular appearance. The image rotates slowly, but as it moves diagonally, the horizontal width fluctuates, causing the parent container to resize. I want the parent container to maintain 100% width while keeping the content inside without affecting its size. You can see the issue in action here (image courtesy of this):
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.container {
display: flex;
flex-shrink: 0;
padding: 64px;
width: 100vw;
}
.bg-image {
background-image: url(https://i.imgur.com/9mhwcLH.png);
background-size: contain;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
background-position: center center;
background-repeat: no-repeat;
-webkit-animation: spin 512s linear infinite;
animation: spin 512s linear infinite;
height: 0;
padding-top: 100%;
background-size: contain;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
}<div class="container">
<div class="bg-image"></div>
</div>There are two potential solutions for this issue, both of which would work for me:
- The parent container should maintain a constant width since the underlying div is transformed into a circle. This means that changes in the square div's width should not impact the parent.
- Alternatively, you could resize the child element so that at a 45-degree angle, it perfectly fits within the parent, shrinking as it rotates. Both approaches would be helpful, and knowing how to implement them would be advantageous for future use.
If you have any ideas on how to resolve this issue and prevent the parent from resizing or being affected by the child's width changes, please share your suggestions!