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
Updated I'm encountering an issue with fitting the SVG to the full height of its container. Presently, it appears too large and gets cut off. I attempted to use preserveAspectRatio(xMidYMid meet), but it doesn't stretch to fill the container. Any suggestions on how to resolve this?
img {
width: 100%;
height: 100%;
}
.child1 {
background-color: #242321;
}
.parent {
height: 500px;
display: flex;
}
.grey-rectangle {
position: relative;
}
.grey-rectangle::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://dummyimage.com/1080x1920/000/fff.png") center center no-repeat;
background-size: cover;
-webkit-mask: url("https://cdn.glitch.global/8b3c1190-f7e6-419e-b631-a2620293ee60/rectangle.svg?v=1709712041215#svgView(preserveAspectRatio(xMidYMid meet))") top center no-repeat;
mask: url("https://cdn.glitch.global/8b3c1190-f7e6-419e-b631-a2620293ee60/rectangle.svg?v=1709712041215#svgView(preserveAspectRatio(none))") top center no-repeat;
}<body>
<div style="padding: 30px;"></div>
<div class="parent">
<div class="child1" style="width: 70%;">
<img src="https://cdn.glitch.global/8b3c1190-f7e6-419e-b631-a2620293ee60/left-child.png?v=1709739934821">
<div class="child1-container">
</div>
</div>
<div class="grey-rectangle" style="width: 30%; height: 100%;">
</div>
</div>Past Method (the svg is being cut off)
<style>
.icon {
width: 100%;
height: 100%;
background: url('https://cdn.glitch.global/8b3c1190-f7e6-419e-b631-a2620293ee60/rectangle.svg?v=1709712041215') no-repeat 50% 50%;
background-size: cover;
}
.icon-kitten {
-webkit-mask: url('rectangle.svg#svgView(preserveAspectRatio(none))') no-repeat 0% 50%;
background: url(https://dummyimage.com/600x400/000/fff.png) 50% 0%;
background-size: cover;
}
.parent {
height: 500px;
display: flex;
overflow: hidden;
}
</style>
<div class="parent" style="height: 500px; display: flex;">
<div class="child1" style="width: 50%; height: 100%; background-color: bisque;"></div>
<div class="icon icon-kitten" style="width: 50%; height: 100%;"></div>
</div>