Question

我正在尝试将带有图像的网格放置在主要背景图像上。

到目前为止，我已经可以做我想做的一切。一切正常，除了调整浏览器窗口大小时。

这就是我所拥有的（不要介意图像。它们只是用于测试）：

最大尺寸（网格与背景图像的关系是完美的）：

中等大小（如预期的那样，调整了左侧的图像并使其下方。网格与背景图像的关系仍然很完美）：

尺寸小（网格与背景图像的关系完全弄乱了，甚至位于下面的图像顶部）：

代码如下：

...

    <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很陌生。我想念什么？

还有另一种方法可以达到这种效果吗？

非常感谢您。

在引导程序中对图像进行网格处理

0 个答案: