CODEWITHSUNDEEP
javascripthtmlcsssvg
mathew11
mathew11

Reputation: 3580

CSS Scaling a svg using flexbox

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

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

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

Upvotes: 3

Views: 3253

Answers (2)

mathew11
mathew11

Reputation: 3580

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

Upvotes: 2

Paul LeBeau
Paul LeBeau

Reputation: 101820

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

Responsively change div size keeping aspect ratio

Upvotes: 0

Related Questions