I got a problem with scaling my svg pictures. Actually, I'm creating a design for a html cardgame.

Here is a picture of the window:

[![enter image description here](https://i.stack.imgur.com/xreU9.png)](https://i.stack.imgur.com/xreU9.png)

The scaling is correct, because there is enough space in both directions, so the svg fills the space.

But when I'm gonna resize the window and the width gets smaller and smaller, something like that happens:
[![enter image description here](https://i.stack.imgur.com/t7nVH.png)](https://i.stack.imgur.com/t7nVH.png)

So, the scaling of the picture svg itself is correct, but html/css thinks that the image is the whole part inside of the displayed border lines. I just took the image with a drag'n'drop to visualize the problem.

HTML: (just a part, here the last row)

```
<div id="playerRow">
    <img id="playerCard2"/>
    <img id="playerCard3"/>
    <img id="playerCard4"/>
    <img id="playerCard5"/>
</div>

```

CSS:

```
#playerRow{
    display:flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    background-color: forestgreen;
    border-style: solid;
    border-radius: 20px;
    height: 45%;
}
#playerCard1, #playerCard2, #playerCard3, #playerCard4, #playerCard5 {
    min-width:0px;
    min-height:0px;
    height:90%;
    margin:1vh;
    border-style: dashed;
    border-color: #555555;
    border-radius: 15px;
}

```

I'm quite sure that there is a mistake with the height. Because when I put the height from 90% down to 40% it looks better for the resized width-low window.
I tried to use max-height instead height, but that doesn't make any difference.

What could be the problem? I just want to scale the border lines to the size of the image. I tried also with javascript a kind of rescaling, but the problem is, that I can't get the height of the svg, it always takes the whole part. Furthermore, I also want to know if that problem is possible to solve only in CSS.

**EDIT**:
The last row with the ratio css trick:
[![enter image description here](https://i.stack.imgur.com/ir7fh.png)](https://i.stack.imgur.com/ir7fh.png)