Как исправить обрезание SVG при использовании в качестве фона? ⇐ CSS

[Anonymous]

I'm currently experiencing an issue with my SVG, where it seems to be cut off when it is resized on a larger screen. I've attempted various adjustments to the preserveAspectRatio attribute without success.

I've explored multiple methods, but none seem to produce the desired result. I aim to have the SVG scalable based on the screen size while ensuring that the image covers the entirety of the SVG without resizing.

Any guidance or suggestions on how to resolve this issue would be greatly appreciated.

This is the look i'm going for

Method 1 (the image is stretched together with svg)

.child3{ background-color: red; /* -webkit-mask-image: url(); */ /* mask-image: url(); */ height: 100%; width: 100%; display: inline-block; mask: url() no-repeat 50% 50%; mask-size: contain; } Method 2 (the svg is being cut off)
.icon { width: 100%; height: 100%; background: url('') no-repeat 50% 50%; background-size: cover; } .icon-kitten { -webkit-mask: url('rectangle.svg#svgView(preserveAspectRatio(none))') no-repeat 0% 50%; background: url() 50% 0%; background-size: cover; } .parent { height: 500px; display: flex; overflow: hidden; }

Источник: https://stackoverflow.com/questions/781 ... background