Я пытаюсь поместить сетку с изображениями поверх основного фонового изображения.
Я могу сделать все, что хочу до сих пор.И все работает отлично, за исключением случаев, когда я изменяю размер окна браузера.
Вот что у меня есть (не обращайте внимания на изображения. Они предназначены для тестирования):
Максимальный размер (отношение сетки кфоновое изображение идеально): 
Средний размер (изображение слева отрегулировано и опускается ниже, в зависимости от намерения. Отношение сетки к фоновому изображению по-прежнему идеально):
Небольшой размер (отношение сетки к фоновому изображению полностью испорчено и даже идет вверху изображения ниже): 
Вот код:
...
<head>
...
<!-- Styles -->
<style>
.grid-canvas {
display: flex;
align-items: center;
justify-content: center;
min-width:100px;
}
.foreground_layer {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container"> <!-- global canvas -->
<div class="row no-gutters">
<div class="col-sm">
<div class="grid-canvas"> <!-- man front canvas -->
<img src="./images/man_front.svg" class="img-rounded" alt="Rounded Image">
<div class="foreground_layer">
<div class="row no-gutters">
<div class="col">
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
</div> <!-- col -->
<div class="col">
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
</div> <!-- col -->
<div class="col">
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
</div> <!-- col -->
<div class="col">
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
<div class="tile">
<div class="selectable-img"> <!-- -->
@component('components.fss.cog') @endcomponent
</div>
</div>
</div> <!-- col -->
</div> <!-- row -->
</div> <!-- foreground_layer -->
</div> <!-- man front canvas -->
</div>
<div class="col-sm">
<div class="grid-canvas"> <!-- man back canvas -->
<img src="./images/man_back.svg" class="img-rounded" alt="Rounded Image">
</div> <!-- man back canvas -->
</div>
</div>
</div> <!-- global canvas -->
</body>
</html>
Компонент Cog - это просто svg.Мне нужно использовать его как компонент (вместо необработанного .svg), чтобы я мог делать некоторые вещи, которые мне нужны.Это не имеет значения.
Я довольно новичок в CSS и HTML.Чего мне не хватает?
Есть ли другой способ добиться этого эффекта?
Заранее большое спасибо.