I am working on coding an image that requires specific resizing capabilities:
https://i.sstatic.net/7hLwL.png
The objective is to ensure that when the browser window is resized, the center notch remains proportional and both columns scale uniformly.
Below is the code I have implemented:
.main {
border: 1px solid #000;
padding: 22px;
max-width: 1440px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.container {
max-width: 575px;
width: 100%;
height: 100%;
border-radius: 9px;
}
.container svg {
display: block;
width: 100%;
}
/* Right column, the image has is a png with the notches. */
img {
min-width: 0;
max-width: 100%;
height: 100%;
display: block;
}<div class="main">
<div class="container">
<svg width="575" height="604" viewBox="0 0 575 604" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1143_882)">
<g clip-path="url(#clip1_1143_882)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4.02944 0 0 4.02945 0 9.00001V595C0 599.971 4.02944 604 9 604H466C470.971 604 475 599.971 475 595V495C475 490.029 479.029 486 484 486H566C570.971 486 575 481.971 575 477V9C575 4.02944 570.971 0 566 0H9Z" fill="#C4C4C4"/>
</g>
</g>
<defs>
<clipPath id="clip0_1143_882">
<rect width="575" height="604" fill="white"/>
</clipPath>
<clipPath id="clip1_1143_882">
<rect width="575" height="604" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<img src="example.png" alt="" />
</div>I've experimented with CSS masking techniques but without success. As an alternative, I'm considering using the entire section as a background image, although I remain interested in salvaging my original approach.
Below is the svg code for the complete section:
<svg width="1396" height="656" viewBox="0 0 1396 656" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1143_887)">
<g clip-path="url(#clip1_1143_887)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4.02944 0 0 4.02945 0 9.00001V595C0 599.971 4.02944 604 9 604H466C470.971 604 475 599.971 475 595V495C475 490.029 479.029 486 484 486H566C570.971 486 575 481.971 575 477V9C575 4.02944 570.971 0 566 0H9Z" fill="#C4C4C4"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M1362 611C1362 606.029 1366.03 602 1371 602H1387C1391.97 602 1396 597.971 1396 593V11C1396 6.02943 1391.97 2 1387 2H605C600.029 2 596 6.02944 596 11V495C596 499.971 591.971 504 587 504H506C501.029 504 497 508.029 497 513V647C497 651.971 501.029 656 506 656H1353C1357.97 656 1362 651.971 1362 647V611Z" fill="#C4C4C4"/>
<defs>
<clipPath id="clip0_1143_887">
<rect width="575" height="604" fill="white"/>
</clipPath>
<clipPath id="clip1_1143_887">
<rect width="575" height="604" fill="white"/>
</clipPath>
</defs>
</svg>