I'm having trouble with an SVG that needs to have a fixed height to avoid looking too big when the width exceeds 2000 pixels on widescreens. I want the clipping mask to always be visible and the background image to be sliced rather than stretched. So far, my attempts have been unsuccessful.
Here is my current code snippet: https://codepen.io/bucky208/pen/OEqbPp
div {
width: 100%;
}<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1381.5" preserveAspectRatio="none" style="display: block; position: absolute; width: 100%;height: 400px;">
<g id="clipgroup">
<defs>
<polygon id="mask" points="0,572.1 0,1381.3 1024,1040.5 1024,337.6 0,0"/>
</defs>
<clipPath id="mask_1_">
<use xlink:href="#mask" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#mask_1_);">
<image style="overflow:visible;" width="331" height="444" id="theimage" xlink:href="https://image.ibb.co/ipbNkJ/56_E0406_E5_C8_EF897.jpg" transform="matrix(3.1119 0 0 3.1111 -3.0528 -2.604167e-04)"></image>
</g>
</g>
</svg>
</div>Do I need another wrapper around everything? How can I restore the image ratio?
Many thanks to all those trying to assist me with this issue.