我试图在主背景图像上放置一个带有图像的网格。
到目前为止,我能做我想做的一切。一切都很好,除了我调整浏览器窗口的大小。
这是我所拥有的(不要介意这些图像)。它们用于测试):
最大大小(网格与背景图像的关系非常完美):
中等大小(左边的图像经过调整,并按意图向下移动。网格与背景图像的关系仍然完美):
小尺寸(网格与背景图像的关系完全混乱,甚至在下面的图像上方):
代码如下:
...
<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。我需要将它作为一个组件(而不是raw.svg)使用,这样我就可以做一些我需要的事情。这应该无关紧要。
我对css和html还很陌生。我错过了什么?
有没有其他方法达到这种效果?
提前非常感谢。
