CSS Scaling a svg using flexbox

Question

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:

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:

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:

score 1 · Accepted Answer · edited May 23 '17 at 12:32

I solved my problem. First of all, I used the CSS-ratio trick, which is described here: Responsively change div size keeping aspect ratio

But the problem still appeared, because the width was responsible for the resolution. So when the width grows, the height grows too, that's correct, because it always takes care of the defined ratio. The only thing is, that the correct width has to be calculated.

So, everytime the window has been resized, the width has to be recalculated. I'm doing that with javascript:

function correctRatio(card, div){

width =$(div).width();

currentHeight = $(div).height();
wrongWidth = $(div).width();

newWidth = 9/14 * currentHeight;

if(wrongWidth+1 > newWidth){
    newWidth = newWidth/(width/100);
}else{
    newWidth = 100;
}
$(card).width(newWidth+"%");
    console.log("Setted Width:" + newWidth);
}

The 9/14 resp. 14/9 is in my case the ratio 9:14

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

You should be able to have the card containers keep their aspect ratio using this trick.

Responsively change div size keeping aspect ratio

edited May 23 '17 at 12:32

Community

1
1

answered Jul 25 '15 at 00:47

Paul LeBeau

97,474
9
154
181

Thanks! I've tried that trick, it works, so the ratio is correct, but the problem is that I'm using a absolut positioned styling, which means that when the width>height (window resolution), the ratio containers starts to overlap the top/bottom borders. I've put a further screenshot of the problem on my question. How could I avoid that problem? I've tried already to set the height, but then it breaks the ratio trick, max-height also doesn't work, because I think that the padding-top is not counting as the height. – mathew11 Jul 28 '15 at 10:16
Without seeing your actual page and CSS I could only make wild guesses. I think you would need to post it somewhere. – Paul LeBeau Jul 28 '15 at 12:37
I reproduced my problem on jsFiddle. [JSFiddle](https://jsfiddle.net/mathew11/q0pczdua/8/). Just try to resize the window. All cards should stay in their row, the width is okay, but the height is wrong. (Overlapping borders) – mathew11 Jul 28 '15 at 13:18

CSS Scaling a svg using flexbox

2 Answers2