Таким образом, игровой контейнер - это весь океан, который представляет собой гибкий контейнер (столбец), в который я вставляю строки.
Каждая строка также является гибким контейнером(строки), в которые я вставляю изображения турбины.
(чтобы турбины центрировались на экране, когда есть только одна строка, я оборачиваю их в элемент div, который также является гибким контейнером (столбцом).
Все это выполняется динамически в jquery / js, так как число турбин меняется в зависимости от уровня игры. Это означает, что я не могу установить размеры в css.
Мне кажется, что я не могу получитьтурбины для правильного изменения размера, чтобы не переполнять контейнер.
HTML Структура:
<div class="game-container">
<div class="game-row">
<div class="turbine-container">
<img class="turbine-pic">
CSS:
.game-container {
width: 75%;
max-height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.game-row {
display: flex;
flex-direction: row;
justify-content: center;
flex:1;
}
.turbine-container {
display:flex;
flex-direction: column;
justify-content: center;
flex: 1;
box-sizing: border-box;
max-height: 95%;
}
.turbine-pic {
max-width:95%;
max-height: 95%;
height:auto;
width:auto;
}