CSS Масштабирование svg с использованием flexbox

Question

У меня возникла проблема с масштабированием моих изображений svg. На самом деле, я создаю дизайн для html-карточной игры.

Вот картинка из окна:

масштабирования правильно, потому что есть достаточно мест в обоих направлениях, так что SVG заполняет пространство.

Но когда я буду изменять размер окна, а ширина становится все меньше и меньше, что-то подобное происходит:

Таким образом, масштабирование самого изображения SVG правильно, но HTML/CSS считает, что изображение является частью внутри отображаемых пограничных линий. Я просто взял изображение с помощью drag'n'drop, чтобы визуализировать проблему.

HTML: (только часть, вот последняя строка)

<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; 
} 

Я совершенно уверен, что есть ошибка с высотой. Потому что, когда я устанавливаю высоту с 90% до 40%, она выглядит лучше для измененного размера окна с низкой шириной. Я попытался использовать максимальную высоту вместо высоты, но это не имеет никакого значения.

В чем может быть проблема? Я просто хочу масштабировать граничные рамки до размера изображения. Я также попытался использовать javascript как перемасштабирование, но проблема в том, что я не могу получить высоту svg, это всегда занимает целую часть. Кроме того, я также хочу знать, можно ли решить эту проблему только в CSS.

EDIT: Последняя строка с отношением CSS трюк:

Answer 1

я решил мою проблему. Прежде всего, я использовал трюк с коэффициентом CSS, который описан здесь: Responsively change div size keeping aspect ratio

Но проблема все же появилась, потому что ширина отвечала за разрешение. Поэтому, когда ширина растет, высота тоже растет, это правильно, потому что она всегда заботится о определенном соотношении. Единственное, что нужно вычислить правильную ширину.

Итак, каждый раз, когда окно было изменено, ширина должна быть пересчитана. Я делаю это с помощью 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); 
} 

9/14 соотв. 14/9 в моем случае отношение 9:14

Answer 2

Вы должны быть в состоянии иметь контейнеры карты сохраняют пропорции, используя этот трюк.

Responsively change div size keeping aspect ratio