移动端缩放时保持位置的响应式图片实现方案咨询

Hey there! Let me break down how to get those PNGs to stay in place as the screen shrinks, just like the example site you're referencing. Here are two solid approaches you can use:

This is the go-to method for pinning elements to specific spots within a container that scales with the screen:

• First, set position: relative; on the parent container holding your images. This tells the images where their absolute positioning should be anchored.
• For each PNG, use position: absolute; along with percentage-based values for top, left, right, or bottom to lock their initial position. Using percentages ensures the position scales proportionally as the container shrinks.
• Don't forget to make the images themselves responsive with width in percentages and height: auto to avoid distortion.

Example CSS:

/* Parent container (like your header section) */
.header-wrapper {
  position: relative;
  width: 100%;
  max-width: 1400px; /* Optional: cap the maximum width for larger screens */
  margin: 0 auto;
  min-height: 350px; /* Match your section's height */
}

/* First PNG image */
.floating-image-1 {
  position: absolute;
  top: 12%;
  right: 6%;
  width: 10%;
  height: auto;
}

/* Second PNG image */
.floating-image-2 {
  position: absolute;
  bottom: 8%;
  left: 4%;
  width: 7%;
  height: auto;
}

If you need more granular control over positioning (especially if your header has other elements), CSS Grid works wonders:

• Turn the parent container into a grid with display: grid;
• Use grid-column and grid-row to assign each image to a specific area of the grid
• Combine with justify-self and align-self to fine-tune their position within the grid cell, and use percentage-based widths for the images to keep them responsive.

Example CSS:

.header-wrapper {
  display: grid;
  width: 100%;
  min-height: 350px;
  grid-template-columns: repeat(12, 1fr); /* 12-column grid for flexibility */
  grid-template-rows: repeat(4, 1fr);
}

.floating-image-1 {
  grid-column: 10 / 12;
  grid-row: 2 / 3;
  justify-self: end;
  align-self: center;
  width: 85%;
  height: auto;
}

.floating-image-2 {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  justify-self: start;
  align-self: flex-end;
  width: 75%;
  height: auto;
}

• Add media queries if you need to adjust positions on extra-small screens:

@media (max-width: 768px) {
  .floating-image-1 {
    top: 18%;
    right: 4%;
    width: 15%;
  }
}

• Always test on multiple screen sizes to ensure the images don't overlap content or get cut off.

Hope this helps you nail that responsive positioning! 🚀

内容的提问来源于stack exchange，提问作者Mark Lester