如何使图片在浏览器窗口缩小后固定于背景指定位置？附现有HTML代码

Got it, let's figure out why those profile avatars are shifting around when you resize your browser window. Right now, you're using position: absolute with fixed pixel values for top and left—which ties the images directly to the browser viewport, not the background floorplan. Since your background uses background-size: contain, it scales proportionally as the window gets smaller or bigger, but those fixed pixel positions don't scale along with it. That's the root of the offset problem.

Here's the Fix: #

We need to anchor the avatars to the floorplan itself, not the viewport. The solution involves wrapping everything in a container that maintains the floorplan's aspect ratio, then using percentage-based positioning for the avatars so they scale with the background.

<html>
<head>
    <meta charset="utf-8">
    <title>Floorplan with Fixed Avatars</title>
    <style>
        /* Reset default margins/padding to avoid unexpected spacing */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            width: 100vw;
            height: 100vh;
            /* Center the floorplan container in the viewport */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Hide scrollbars when window is smaller than floorplan */
        }
        .floorplan-container {
            position: relative;
            width: 100%;
            /* Match these to your background image's original dimensions */
            max-width: 1920px;
            max-height: 1080px;
        }
        /* Pseudo-element to handle the background image and aspect ratio */
        .floorplan-container::before {
            content: '';
            display: block;
            /* Calculate aspect ratio: (image height / image width) * 100% */
            padding-top: 56.25%; /* Example: 1080/1920 = 0.5625 */
            background-image: url('TPHRG floorplan.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        .avatar {
            position: absolute;
            border-radius: 50%;
            /* Use percentages for size so avatars scale with the floorplan */
        }
        #ZY {
            /* Calculate positions: (original pixel value / image dimension) * 100% */
            top: 49.5%; /* 535px / 1080px ≈ 0.495 */
            left: 40.1%; /* 770px / 1920px ≈ 0.401 */
            width: 2.6%; /* 50px / 1920px ≈ 0.026 */
            height: 4.63%; /* 50px / 1080px ≈ 0.0463 */
        }
        #Nehemiah {
            top: 40.28%; /* 435px / 1080px ≈ 0.4028 */
            left: 29.69%; /* 570px / 1920px ≈ 0.2969 */
            width: 2.6%; /* 50px / 1920px ≈ 0.026 */
            height: 5.56%; /* 60px / 1080px ≈ 0.0556 */
        }
    </style>
</head>
<body>
    <div class="floorplan-container">
        <img id="ZY" class="avatar" src="zhi yi face.PNG" alt="Zhi Yi">
        <img id="Nehemiah" class="avatar" src="nehemiah face.PNG" alt="Nehemiah">
    </div>
</body>
</html>

Key Changes Explained: #

• Aspect Ratio Container: The .floorplan-container uses a pseudo-element with padding-top set to your floorplan's aspect ratio. This ensures the container always matches the background image's proportions, so it scales correctly no matter the window size.
• Percentage Positioning: All top, left, width, and height values for the avatars are converted to percentages based on your original background image dimensions. This keeps the avatars locked to their exact spots on the floorplan as it scales.
• Centered Layout: The body uses flexbox to center the floorplan container, so it stays centered in the viewport instead of sticking to the top-left corner.

Quick Note: #

Make sure to update the max-width, max-height, padding-top value, and avatar percentages to match your actual background image's dimensions. To calculate the aspect ratio, divide the image's height by its width and multiply by 100%. For the avatar positions, divide the original pixel values by the image's width (for left) or height (for top) to get the correct percentage.

内容的提问来源于stack exchange，提问作者Chiong Wilson