如何在网格布局中响应具有绝对位置的图像？

Question

我想在页面的标题中放置 7 个 svg 图像，它们位于自己的 div 中，恰好位于页面的特定点上，同时使用网格布局来提高响应能力，并且照片将保留在它们在页面放大和缩小中的位置，但要与网格流保持一致。

我使用显示网格作为页面标题并给出相对位置。标题内 div 的绝对位置 max-width 11 rem 对于这些 div 内的照片，显示块和宽度 100%。

结果是 header 的大小发生变化，变得与正在查看的页面的宽度相同，但是 header 中的 div 大小没有变化。

（为了更好地理解，假设您将一根树枝水平放置在标题中，现在您有 7 个苹果需要粘在树枝上。）

Answer 1

如果您想在网格布局中使用绝对位置来获得响应式图像，它将保留一些特定的定位和网格流。可能的方法如下：

1. 将网格和绝对位置应用到标题容器。

2. 使表头显示：grid；并添加最大宽度。

3. 现在，包含每个 SVG 图像的 div 可能包含以下内容，

4. 位置：绝对准确放置

5. 添加顶部和左侧的值作为其响应能力的百分比。

6. 使用变换：translate(-50%, -50%)将图像居中放置在其位置

7. 使 SVG 图像响应：

8. 将宽度和高度设置为百分比

9. 在 SVG 上使用 viewBox 属性进行正确缩放

10. 使用媒体查询来调整不同屏幕尺寸的位置和大小。

这是示例 -

.header {
 display: grid;
 position: relative;
 max-width: 100%;
  height: 200px; /* Adjust as needed */
}

.svg-container {
  position: absolute;
  top: 50%; /* Adjust for vertical position */
  left: 20%; /* Adjust for horizontal position */
  transform: translate(-50%, -50%);
  width: 10%; /* Adjust size as needed */
}

.svg-image {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  /* Adjust positions and sizes for smaller screens */
}

这应该锁定图像并允许页面缩放和调整大小，而不改变它们在网格布局中的相对位置。

您可能需要进一步调整百分比，然后根据您的目标布局添加更具体的媒体查询。